/*!*****************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[5]!./src/components/common/form-subscription/index.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************/
#form-subscription {
  display: block;
  max-width: 480px;
  margin: 30px auto 0;
}

#form-subscription div {
  position: relative;
}

#form-subscription input {
  line-height: 1.5;
  background-color: var(--color-athens-gray);
  border: unset;
}

@media (hover: none) and (pointer: coarse) {
  #form-subscription input {
    border: 1px solid var(--color-amber);
  }
}
@media (max-width: 1024px) {
  #form-subscription input {
    border: 1px solid var(--color-amber);
  }
}
#form-subscription input:not(:-moz-placeholder) + label svg {
  max-width: 12px;
}

#form-subscription input:focus + label svg, #form-subscription input:not(:placeholder-shown) + label svg, #form-subscription input.valid + label svg {
  max-width: 12px;
}

#form-subscription input.form_field__error__field + label {
  color: rgba(117, 117, 117, 0.8) !important;
}

#form-subscription label::after {
  content: "";
  display: block;
  width: 100%;
  height: 50%;
  background-color: var(--color-athens-gray);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}

#form-subscription button {
  font-weight: var(--medium);
  font-size: 14px;
  color: var(--color-midnight);
  background-color: var(--color-amber);
  border-radius: var(--border-radius-sm);
  padding: 10px 14px;
  transform: translate(-4px, 4px);
  transition: background-color var(--def-transition-300ms);
  position: absolute;
  top: 0;
  right: 0;
}

@media (hover: hover) and (pointer: fine) {
  #form-subscription button:hover {
    background-color: rgba(255, 195, 0, 0.8);
  }
}
#form-subscription .form_field__error__label {
  position: absolute;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[5]!./src/components/sections/subscription/index.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************/
.subscription {
  min-height: 480px;
  background-color: var(--color-titan-white);
  margin-top: -90px;
  overflow: hidden;
  position: relative;
}

@media (max-width: 768px) {
  .subscription {
    min-height: 380px;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .subscription {
    min-height: 420px;
  }
}
@media (max-width: 1024px) {
  .subscription {
    margin-top: unset;
  }
}
.subscription .bg {
  pointer-events: none;
  z-index: 0;
}

.subscription .bg_left, .subscription .bg_right {
  width: 50%;
  height: 100%;
  max-height: 320px;
  position: absolute;
  bottom: 0;
  width: 20%;
}

.subscription .bg_left {
  left: 0;
}

.subscription .bg_left img {
  object-position: left bottom;
}

.subscription .bg_right {
  right: 0;
}

.subscription .bg_right img {
  object-position: right bottom;
}

.subscription .container {
  position: relative;
  z-index: 1;
}