html, body {
  --tw-bg-opacity: 1;
  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
}

html,
body {
  /*bg-gradient-to-br from-blue-900 to-black bg-fixed bg-cover relative;*/
}

p strong {
  --tw-text-opacity: 1;
  color: rgba(0, 164, 218, var(--tw-text-opacity));
}

.site {
  padding-bottom: 5rem;
  position: relative;
  min-height: 100vh;
}

.bg-gradient-base {
  background-attachment: fixed;
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  --tw-gradient-from: #0e2128;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(14, 33, 40, 0));
  --tw-gradient-to: #000;
  background-size: cover;
}

.bg-alpha-xs {
  -webkit-backdrop-filter: saturate(180%) blur(5px);
  backdrop-filter: saturate(180%) blur(5px);
}

.bg-alpha-sm {
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
}

.bg-alpha {
  -webkit-backdrop-filter: saturate(180%) blur(15px);
  backdrop-filter: saturate(180%) blur(15px);
}

.bg-alpha-lg {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

.bg-alpha-xl {
  -webkit-backdrop-filter: saturate(180%) blur(25px);
  backdrop-filter: saturate(180%) blur(25px);
}

.bg-alpha-2xl {
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
}

.text-shadow-none {
  text-shadow: none;
}

.offer-list .box.offer-highlight {
  box-shadow: 
    0px 0px 4px  rgba(253, 230, 138, 1), 
    0px 0px 10px 2px  rgba(252, 211, 77, 0.6), 
    0px 0px 20px 4px  rgba(252, 211, 77, 0.3);
}

.offer-list .box.urgent {
  box-shadow: 
    0px 0px 4px  rgba(248, 113, 113, 1), 
    0px 0px 10px 2px  rgba(239, 68, 68, 0.6), 
    0px 0px 20px 4px  rgba(239, 68, 68, 0.3);
}

footer {
  position: absolute;
  bottom: 0px;
  width: 100%;
}

footer a {
  --tw-text-opacity: 1;
  color: rgba(0, 164, 218, var(--tw-text-opacity));
}

footer a:hover {
  --tw-text-opacity: 1;
  color: rgba(115, 205, 235, var(--tw-text-opacity));
}

footer a {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/*UI*/

.text-shadow {
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
}

.salary .small {
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.salary > div > p:first-child { 
  font-size: 32px;
} 

@media (min-width: 768px) {
  .salary > div > p:first-child { 
    font-size: 44px;
  } 
  .salary .small {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.salary .commissions, .salary .text {
  display: block;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.75rem;
  margin-top: -0.5rem;
}

@media (min-width: 768px) {
  .salary .commissions, .salary .text {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.ui-btn {
  --tw-bg-opacity: 1;
  background-color: rgba(0, 164, 218, var(--tw-bg-opacity));
}

.ui-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(69, 189, 228, var(--tw-bg-opacity));
}

.ui-btn {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  --tw-gradient-from: #45bde4;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(69, 189, 228, 0));
  --tw-gradient-stops: var(--tw-gradient-from), #00a4da, var(--tw-gradient-to, rgba(0, 164, 218, 0));
  --tw-gradient-to: #0a83ab;
}

.ui-btn:hover {
  --tw-gradient-from: #73cdeb;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(115, 205, 235, 0));
  --tw-gradient-stops: var(--tw-gradient-from), #00a4da, var(--tw-gradient-to, rgba(0, 164, 218, 0));
  --tw-gradient-to: #0a83ab;
}

.ui-btn:focus {
  --tw-gradient-from: #00a4da;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 164, 218, 0));
  --tw-gradient-stops: var(--tw-gradient-from), #0a83ab, var(--tw-gradient-to, rgba(10, 131, 171, 0));
  --tw-gradient-to: #10637f;
}

.ui-btn {
  border-radius: 0.25rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.ui-btn:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.ui-btn {
  padding: 0.5rem;
  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.ui-btn:hover {
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.ui-btn:focus {
  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.ui-btn {
  text-align: center;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.ui-btn:hover {
  --tw-translate-y: -0.125rem;
}

.ui-btn:focus {
  --tw-translate-y: 0px;
}

.ui-btn {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 300ms;
}

.ui-btn:focus {
  transition-duration: 100ms;
}

.ui-btn.large {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.75rem;
  padding: 1rem;
}

.ui-btn.green {
  --tw-bg-opacity: 1;
  background-color: rgba(101, 163, 13, var(--tw-bg-opacity))
}

.ui-btn.green:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(132, 204, 22, var(--tw-bg-opacity));
}

.ui-btn.green {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  --tw-gradient-from: #84cc16;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(132, 204, 22, 0));
  --tw-gradient-stops: var(--tw-gradient-from), #65a30d, var(--tw-gradient-to, rgba(101, 163, 13, 0));
  --tw-gradient-to: #4d7c0f;
}

.ui-btn.green:hover {
  --tw-gradient-from: #a3e635;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(163, 230, 53, 0));
  --tw-gradient-stops: var(--tw-gradient-from), #65a30d, var(--tw-gradient-to, rgba(101, 163, 13, 0));
  --tw-gradient-to: #4d7c0f;
}

.ui-btn.green:focus {
  --tw-gradient-from: #65a30d;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(101, 163, 13, 0));
  --tw-gradient-stops: var(--tw-gradient-from), #4d7c0f, var(--tw-gradient-to, rgba(77, 124, 15, 0));
  --tw-gradient-to: #3f6212;
}

.ui-btn.yellow {
  --tw-bg-opacity: 1;
  background-color: rgba(253, 216, 53, var(--tw-bg-opacity))
}

.ui-btn.yellow:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 235, 59, var(--tw-bg-opacity));
}

.ui-btn.yellow {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  --tw-gradient-from: #ffeb3b;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 235, 59, 0));
  --tw-gradient-stops: var(--tw-gradient-from), #fdd835, var(--tw-gradient-to, rgba(253, 216, 53, 0));
  --tw-gradient-to: #fbc02d;
}

.ui-btn.yellow:hover {
  --tw-gradient-from: #ffee58;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 238, 88, 0));
  --tw-gradient-stops: var(--tw-gradient-from), #fdd835, var(--tw-gradient-to, rgba(253, 216, 53, 0));
  --tw-gradient-to: #fbc02d;
}

.ui-btn.yellow:focus {
  --tw-gradient-from: #fdd835;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(253, 216, 53, 0));
  --tw-gradient-stops: var(--tw-gradient-from), #fbc02d, var(--tw-gradient-to, rgba(251, 192, 45, 0));
  --tw-gradient-to: #f9a825;
}

.ui-btn.amber {
  --tw-bg-opacity: 1;
  background-color: rgba(217, 119, 6, var(--tw-bg-opacity))
}

.ui-btn.amber:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(245, 158, 11, var(--tw-bg-opacity));
}

.ui-btn.amber {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  --tw-gradient-from: #f59e0b;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(245, 158, 11, 0));
  --tw-gradient-stops: var(--tw-gradient-from), #d97706, var(--tw-gradient-to, rgba(217, 119, 6, 0));
  --tw-gradient-to: #b45309;
}

.ui-btn.amber:hover {
  --tw-gradient-from: #fbbf24;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(251, 191, 36, 0));
  --tw-gradient-stops: var(--tw-gradient-from), #d97706, var(--tw-gradient-to, rgba(217, 119, 6, 0));
  --tw-gradient-to: #b45309;
}

.ui-btn.amber:focus {
  --tw-gradient-from: #d97706;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(217, 119, 6, 0));
  --tw-gradient-stops: var(--tw-gradient-from), #b45309, var(--tw-gradient-to, rgba(180, 83, 9, 0));
  --tw-gradient-to: #92400e;
}

.ui-btn.orange {
  --tw-bg-opacity: 1;
  background-color: rgba(234, 88, 12, var(--tw-bg-opacity))
}

.ui-btn.orange:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(249, 115, 22, var(--tw-bg-opacity));
}

.ui-btn.orange {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  --tw-gradient-from: #f97316;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249, 115, 22, 0));
  --tw-gradient-stops: var(--tw-gradient-from), #ea580c, var(--tw-gradient-to, rgba(234, 88, 12, 0));
  --tw-gradient-to: #c2410c;
}

.ui-btn.orange:hover {
  --tw-gradient-from: #fb923c;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(251, 146, 60, 0));
  --tw-gradient-stops: var(--tw-gradient-from), #ea580c, var(--tw-gradient-to, rgba(234, 88, 12, 0));
  --tw-gradient-to: #c2410c;
}

.ui-btn.orange:focus {
  --tw-gradient-from: #ea580c;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(234, 88, 12, 0));
  --tw-gradient-stops: var(--tw-gradient-from), #c2410c, var(--tw-gradient-to, rgba(194, 65, 12, 0));
  --tw-gradient-to: #9a3412;
}

.ui-btn.red {
  --tw-bg-opacity: 1;
  background-color: rgba(220, 38, 38 var(--tw-bg-opacity))
}

.ui-btn.red:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(239, 68, 68 var(--tw-bg-opacity));
}

.ui-btn.red {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  --tw-gradient-from: #ef4444;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249, 115, 22, 0));
  --tw-gradient-stops: var(--tw-gradient-from), #dc2626, var(--tw-gradient-to, rgba(234, 88, 12, 0));
  --tw-gradient-to: #b91c1c;
}

.ui-btn.red:hover {
  --tw-gradient-from: #f87171;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(251, 146, 60, 0));
  --tw-gradient-stops: var(--tw-gradient-from), #ef4444, var(--tw-gradient-to, rgba(234, 88, 12, 0));
  --tw-gradient-to: #dc2626;
}

.ui-btn.red:focus {
  --tw-gradient-from: #dc2626;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(234, 88, 12, 0));
  --tw-gradient-stops: var(--tw-gradient-from), #b91c1c, var(--tw-gradient-to, rgba(194, 65, 12, 0));
  --tw-gradient-to: #991b1b;
}
/*SELECT */

.input-field {
  display: flex;
  margin-top: 1rem;
  margin-bottom: 1rem;
  width: 100%;
}

.input-field label {
  --tw-bg-opacity: 1;
  background-color: rgba(14, 33, 40, var(--tw-bg-opacity));
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
  flex-shrink: 0;
  font-weight: 700;
  padding: 0.5rem;
  min-width: 8rem;
}

.input-field input, .input-field textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  --tw-bg-opacity: 1;
  background-color: rgba(14, 33, 40, var(--tw-bg-opacity));
  --tw-bg-opacity: 0.5;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  flex-shrink: 1;
}

.input-field input:focus, .input-field textarea:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.input-field input, .input-field textarea {
  padding: 0.5rem;
  width: 100%;
}

.input-field textarea.autogrow {
  resize: none;
  overflow: hidden;
  min-height: 24px;
}

.select-field {
  flex-grow: 1;
  position: relative;
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}

.select-field .icon {
  margin: 0.75rem;
  pointer-events: none;
  position: absolute;
  top: 1px;
  right: 20px;
  transform: scale(1.3);
  transition: 0.15s ease-in-out;
}

.select-field .caret {
  --tw-bg-opacity: 1;
  background-color: rgba(14, 33, 40, var(--tw-bg-opacity));
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  padding: 0.75rem;
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  transition: 0.15s ease-in-out;
}

.select-field:hover .caret {
  --tw-bg-opacity: 1;
  background-color: rgba(0, 164, 218, var(--tw-bg-opacity));
}

.select-field select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  --tw-bg-opacity: 1;
  background-color: rgba(14, 33, 40, var(--tw-bg-opacity));
  --tw-bg-opacity: 0.5;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  cursor: pointer;
  flex-shrink: 1;
}

.select-field select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.select-field select {
  padding: 0.5rem;
  padding-right: 30px;
  width: 100%;
  transition: 0.15s ease-in-out;
}

.select-field.icon select {
  padding-right: 58px;
}

/* Search */

.offer-list {
  cursor: pointer;
  margin-bottom: 3rem;
  position: relative;
  width: 100%;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.offer-list > div {
  margin-top: 5rem;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 300ms;
}

@media (min-width: 768px) {
  .offer-list > div {
    margin-top: 0px;
  }
}

.offer-list:hover > div {
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-translate-y: -0.25rem;
}

.offer-list .box {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 300ms;
}

@media (min-width: 768px) {
  .offer-list .box {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    margin-left: 2rem;
  }
}

@media (min-width: 768px) {
  .offer-list .box.featured {
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
    margin-left: 0px;
  }
}

.offer-list:hover .box {
  --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.offer-list .title {
  --tw-bg-opacity: 0.6;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 300ms;
  -webkit-backdrop-filter: saturate(180%) blur(15px);
  backdrop-filter: saturate(180%) blur(15px);
}

@media (min-width: 768px) {
  .offer-list .title {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
  }
}

.offer-list .title {
  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
}

.offer {
  position: relative;
  width: 100%;
}

.offer .title {
  --tw-bg-opacity: 0.6;
  display: flex;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-right: 1rem;
  padding-left: 8rem;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 300ms;
  -webkit-backdrop-filter: saturate(180%) blur(15px);
  backdrop-filter: saturate(180%) blur(15px);
}

@media (min-width: 1280px) {
  .offer .title {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-right: 2rem;
    padding-left: 10rem;
  }
}

.offer .title {
  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
}

.offer-list:hover .title {
  --tw-bg-opacity: 0.9;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6);
}

.offer-list .salary .value {
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 300ms;
  transform-origin: 50% 50%;
}

@media screen and (min-width:640px){
  .offer-list .salary .value {
    transform-origin: 100% 50%;
  }

  .offer-list .featured .salary .value {
    transform-origin: 50% 50%;
  }
}

.offer-list:hover .salary .value {
  --tw-scale-x: 1.25;
  --tw-scale-y: 1.25;
}

.offer .salary p:first-child {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2rem;
}

@media (min-width: 640px) {
  .offer .salary p:first-child {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

.offer .salary p:not(:first-child) {
  --tw-text-opacity: 1;
  color: rgba(159, 169, 172, var(--tw-text-opacity));
}

.offer .schedules {
  margin-top: -2rem;
  margin-bottom: -2rem;
}

@media (min-width: 768px) {
  .offer .schedules {
    margin-right: -1rem;
  }
}

@media (min-width: 1024px) {
  .offer .schedules {
    margin-right: 0px;
  }
}

@media (min-width: 1280px) {
  .offer .schedules {
    margin-right: -2rem;
  }
}

.offer .schedule {
  font-size: 1.125rem;
  line-height: 1.75rem;
  margin-bottom: 2rem;
  padding-top: 2rem;
  width: 100%;
}

@media (min-width: 768px) {
  .offer .schedule {
    padding-right: 1rem;
    width: 50%;
  }
}

@media (min-width: 1024px) {
  .offer .schedule {
    padding-right: 0px;
    width: 100%;
  }
}

@media (min-width: 1280px) {
  .offer .schedule {
    padding-right: 2rem;
    width: 50%;
  }
}

.offer .schedule p {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.offer .schedule .or {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.offer .schedule .day {
  flex: 1 1 auto;
  font-weight: 700;
}

.offer .schedule .time {
  flex: 1 1 auto;
  text-align: right;
  --tw-text-opacity: 1;
  color: rgba(159, 169, 172, var(--tw-text-opacity));
}

.offer .stars .far {
  --tw-text-opacity: 1;
  color: rgba(159, 169, 172, var(--tw-text-opacity));
}

.offer ul {
  margin-top: 0.5rem;
  margin-bottom: -1rem;
}

.offer li {
  line-height: 1.25;
  margin-bottom: 1rem;
}

.offer .trainings .type {
  --tw-text-opacity: 1;
  color: rgba(159, 169, 172, var(--tw-text-opacity));
}

.offer .trainings strong {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.75rem;
  text-transform: none;
}

.page h1 {
  font-weight: 300;
  font-size: 2.25rem;
  line-height: 2.5rem;
  --tw-text-opacity: 1;
  color: rgba(0, 164, 218, var(--tw-text-opacity));
}

.page h2 {
  font-weight: 600;
  font-size: 1.875rem;
  line-height: 2.25rem;
  --tw-text-opacity: 1;
  color: rgba(0, 164, 218, var(--tw-text-opacity));
}

.page h3 {
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 2rem;
  --tw-text-opacity: 1;
  color: rgba(0, 164, 218, var(--tw-text-opacity));
}

.page h4 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgba(0, 164, 218, var(--tw-text-opacity));
}

.page h5 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgba(0, 164, 218, var(--tw-text-opacity));
}

.page h6 {
  --tw-text-opacity: 1;
  color: rgba(0, 164, 218, var(--tw-text-opacity));
}

.page p {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: justify;
}

.page .hero {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.page .hero h1 {
  font-weight: 600;
  font-size: 2.25rem;
  line-height: 2.5rem;
  margin-bottom: 1rem;
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}

.page .hero h1 small {
  display: block;
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 2rem;
  margin-bottom: -0.5rem;
  --tw-text-opacity: 1;
  color: rgba(0, 164, 218, var(--tw-text-opacity));
}

.note {
  --tw-bg-opacity: 1;
  background-color: rgba(15, 63, 78, var(--tw-bg-opacity));
  --tw-bg-opacity: 0.8;
  border-radius: 0.25rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
}

.page a {
  --tw-text-opacity: 1;
  color: rgba(0, 164, 218, var(--tw-text-opacity));
}

.page a:hover {
  --tw-text-opacity: 1;
  color: rgba(69, 189, 228, var(--tw-text-opacity));
}

.page ul {
  margin-bottom: 1rem;
}

.page.legal h2 {
  padding-top: 2rem;
}

.page.legal h3, .page.legal h4, .page.legal h5, .page.legal h6 {
  padding-top: 1rem;
}

.page.legal strong, .page.legal a {
  --tw-text-opacity: 1;
  color: rgba(0, 164, 218, var(--tw-text-opacity));
}

.page.legal > li {
  list-style-type: disc;
  list-style-position: outside;
}

.page.legal ol, .page.legal ul {
  padding-left: 2rem;
  position: relative;
}

.page.legal ol[type="a"] > li {
  list-style-type: lower-latin;
  list-style-position: outside;
}

.page.legal ol[type="a"] > li::marker {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2rem;
  position: absolute;
  left: 0px;
  --tw-text-opacity: 1;
  color: rgba(0, 164, 218, var(--tw-text-opacity));
}

/* CASABOX */

#casaBOX {
  display: none;
  height: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  overflow: hidden;
}

@media screen and (min-width: 2000px) {
  #casaBOX {
    display: block;
  }
}

#casaBOX .the_casabox {
  height: 1.5rem;
  margin-right: -2.5rem;
  overflow-y: auto;
  padding-right: 2rem;
}

/* 3D */

.pers250 {
  perspective: 250px;
}

.pers350 {
  perspective: 350px;
}

.pers500 {
  perspective: 500px;
}

.pers650 {
  perspective: 650px;
}

/* On définit le div pour le conteneur, */

/* le cube, ainsi qu'une face générique */

.cube {
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  perspective-origin: 150% 150%;
  transform-style: preserve-3d;
}

.face {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
}

/* On définit chaque face en fonction de sa direction */

.face.right {
  transform: rotateX(2deg) rotateY(-8deg) rotateZ(8deg) translateZ(50px)
    translate(-75%, -50%) scale(1.5);
  width: 1920px;
  height: 1200px;
  -webkit-animation: slowMotion 30s ease-in-out infinite;
          animation: slowMotion 30s ease-in-out infinite;
}

@-webkit-keyframes slowMotion {
  0% {
    transform: rotateX(2deg) rotateY(-8deg) rotateZ(8deg) translateZ(50px)
      translate(-75%, -50%) scale(1.5);
  }

  50% {
    transform: rotateX(2deg) rotateY(-7deg) rotateZ(7deg) translateZ(80px)
      translate(-75%, -50%) scale(1.5);
  }

  100% {
    transform: rotateX(2deg) rotateY(-8deg) rotateZ(8deg) translateZ(50px)
      translate(-75%, -50%) scale(1.5);
  }
}

@keyframes slowMotion {
  0% {
    transform: rotateX(2deg) rotateY(-8deg) rotateZ(8deg) translateZ(50px)
      translate(-75%, -50%) scale(1.5);
  }

  50% {
    transform: rotateX(2deg) rotateY(-7deg) rotateZ(7deg) translateZ(80px)
      translate(-75%, -50%) scale(1.5);
  }

  100% {
    transform: rotateX(2deg) rotateY(-8deg) rotateZ(8deg) translateZ(50px)
      translate(-75%, -50%) scale(1.5);
  }
}

.bgMotion {
  -webkit-animation: zoomInOut 30s ease-in-out infinite;
          animation: zoomInOut 30s ease-in-out infinite;
}

@-webkit-keyframes zoomInOut {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes zoomInOut {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.showScale {
  -webkit-animation: scaleOut 0.2s ease-in-out forwards;
          animation: scaleOut 0.2s ease-in-out forwards;
}

@-webkit-keyframes scaleOut {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes scaleOut {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

.face-1 {
  -webkit-animation: anim-face-1 10s ease-in-out infinite;
          animation: anim-face-1 10s ease-in-out infinite;
}

.face-2 {
  -webkit-animation: anim-face-2 10s linear infinite;
          animation: anim-face-2 10s linear infinite;
}

@-webkit-keyframes anim-face-1 {
  0% {
    opacity: 1;
  }

  15% {
    opacity: 0;
  }

  50% {
  }

  51% {
  }

  85% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes anim-face-1 {
  0% {
    opacity: 1;
  }

  15% {
    opacity: 0;
  }

  50% {
  }

  51% {
  }

  85% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes anim-face-2 {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  15% {
    opacity: 1;
    transform: translateY(10px);
  }

  17% {
    transform: translateY(-5px);
  }

  19% {
    transform: translateY(0px);
  }

  85% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes anim-face-2 {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  15% {
    opacity: 1;
    transform: translateY(10px);
  }

  17% {
    transform: translateY(-5px);
  }

  19% {
    transform: translateY(0px);
  }

  85% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}