/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/




:root {
  --main-bg-color-dark: #121212;
  --max-width-cont: 2000px;
  --font-text-main: "Unbounded";
  --font-text-main-weight: 400;
  --color-main: #e44f54;
  --color-white: white;
}

*{
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}


@font-face {
  font-family: "Unbounded";
  src: url(../../fonts/Unbounded-ExtraLight.ttf);
  font-weight: 200;
}

@font-face {
  font-family: "Unbounded";
  src: url(../../fonts/Unbounded-Light.ttf);
  font-weight: 300;
}

@font-face {
  font-family: "Unbounded";
  src: url(../../fonts/Unbounded-Regular.ttf);
  font-weight: 400;
} 

@font-face {
  font-family: "Unbounded";
  src: url(../../fonts/Unbounded-Medium.ttf);
  font-weight: 500;
}  

@font-face {
  font-family: "Unbounded";
  src: url(../../fonts/Unbounded-SemiBold.ttf);
  font-weight: 600;
} 

@font-face {
  font-family: "Unbounded";
  src: url(../../fonts/Unbounded-Bold.ttf);
  font-weight: 700;
} 

@font-face {
  font-family: "Unbounded";
  src: url(../../fonts/Unbounded-ExtraBold.ttf);
  font-weight: 800;
} 

@font-face {
  font-family: "Unbounded";
  src: url(../../fonts/Unbounded-Black.ttf);
  font-weight: 900;
} 



 

  .upbtn {
    -webkit-transform-origin: center;
        -ms-transform-origin: center;
            transform-origin: center;
    z-index: 98;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    aspect-ratio: 1 / 1;
    color: #FFF;
    position: fixed;
    bottom: -45px;
    right: -45px;
    -webkit-transform: scale(0.7);
        -ms-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    border-radius: 20px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    outline: 5px solid transparent;
  }
  
  
  
  .upbtn:before {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    content: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDI4NC45MjkgMjg0LjkyOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjg0LjkyOSAyODQuOTI5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTE3LjEyOCwxNjcuODcyYzEuOTAzLDEuOTAyLDQuMDkzLDIuODU0LDYuNTY3LDIuODU0YzIuNDc0LDAsNC42NjQtMC45NTIsNi41NjctMi44NTRMMTQyLjQ2Niw1NS42NjZsMTEyLjIwOCwxMTIuMjA2ICAgIGMxLjkwMiwxLjkwMiw0LjA5MywyLjg1NCw2LjU2MywyLjg1NGMyLjQ3OCwwLDQuNjY4LTAuOTUyLDYuNTctMi44NTRsMTQuMjc0LTE0LjI3N2MxLjkwMi0xLjkwMiwyLjg0Ny00LjA5MywyLjg0Ny02LjU2MyAgICBjMC0yLjQ3NS0wLjk1MS00LjY2NS0yLjg0Ny02LjU2N0wxNDkuMDI4LDcuNDE5Yy0xLjkwMS0xLjkwNi00LjA4OC0yLjg1My02LjU2Mi0yLjg1M3MtNC42NjUsMC45NS02LjU2NywyLjg1M0wyLjg1NiwxNDAuNDY0ICAgIEMwLjk1LDE0Mi4zNjcsMCwxNDQuNTU0LDAsMTQ3LjAzNGMwLDIuNDY4LDAuOTUzLDQuNjU4LDIuODU2LDYuNTYxTDE3LjEyOCwxNjcuODcyeiIgZmlsbD0iI0ZGRkZGRiIvPgoJCTxwYXRoIGQ9Ik0xNDkuMDI4LDExNy4wNTVjLTEuOTAxLTEuOTA2LTQuMDg4LTIuODU2LTYuNTYyLTIuODU2cy00LjY2NSwwLjk1My02LjU2NywyLjg1NkwyLjg1NiwyNTAuMSAgICBDMC45NSwyNTIuMDAzLDAsMjU0LjE5MiwwLDI1Ni42N2MwLDIuNDcyLDAuOTUzLDQuNjYxLDIuODU2LDYuNTY0bDE0LjI3MiwxNC4yNzZjMS45MDMsMS45MDMsNC4wOTMsMi44NDgsNi41NjcsMi44NDggICAgYzIuNDc0LDAsNC42NjQtMC45NTEsNi41NjctMi44NDhsMTEyLjIwNC0xMTIuMjA5bDExMi4yMDgsMTEyLjIwOWMxLjkwMiwxLjkwMyw0LjA5MywyLjg1Miw2LjU2MywyLjg1MiAgICBjMi40NzgsMCw0LjY2OC0wLjk0OCw2LjU3LTIuODUybDE0LjI3NC0xNC4yNzZjMS45MDItMS45MDMsMi44NDctNC4wOTMsMi44NDctNi41NjRjMC0yLjQ3OC0wLjk1MS00LjY2Ny0yLjg0Ny02LjU3ICAgIEwxNDkuMDI4LDExNy4wNTV6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
    position: relative;
    -webkit-transform-origin: center;
        -ms-transform-origin: center;
            transform-origin: center;
    display: block;
    left: 20%;
    top: 15%;
  }
  
  

  
  .upbtn-move {
    bottom: 15px;
    right: 15px;
  }
  
  
  

  .zayavka-btn{
    position: fixed;
    right: 22px;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: 5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  
  .pulse {
    display: block;
    width: 12px;
    height: 12px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: red;
    -webkit-box-shadow: 0 0 0 rgba(255, 0, 0, 0.4);
            box-shadow: 0 0 0 rgba(255, 0, 0, 0.4);
    -webkit-animation: pulse 1s infinite;
            animation: pulse 1s infinite;
  }
  .pulse:hover {
    -webkit-animation: none;
            animation: none;
  }

  @media (min-width: 1200px) { 

  .zayavka-btn:hover .zayavka-button-fixed{
    -webkit-transform: scale(1) !important;
        -ms-transform: scale(1) !important;
            transform: scale(1) !important;
  }

}

  .zayavka-button-fixed{
    min-width: -webkit-fit-content;
    min-width: -moz-fit-content;
    min-width: fit-content;
    font-family: var(--font-text-main);
    font-size: 14px;
    border: 1px solid var(--color-main);
    padding: 7px 14px;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    background-color: #1212126a;
    color: var(--color-main);
    border-radius: 20px;
    -webkit-transform: scale(0);
        -ms-transform: scale(0);
            transform: scale(0);
    will-change: transform;
    -webkit-transition: -webkit-transform 0.7s ease;
    transition: -webkit-transform 0.7s ease;
    -o-transition: transform 0.7s ease;
    transition: transform 0.7s ease;
    transition: transform 0.7s ease, -webkit-transform 0.7s ease;
    text-transform: uppercase;
  }



  
  @-webkit-keyframes pulse {
    0% {
      -webkit-box-shadow: 0 0 0 0 rgba(204, 44, 44, 0.4);
    }
    70% {
        -webkit-box-shadow: 0 0 0 20px rgba(204, 44, 44, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(204, 44, 44, 0);
    }
  }
  @keyframes pulse {
    0% {
      -webkit-box-shadow: 0 0 0 0 rgba(204, 44, 44, 0.4);
              box-shadow: 0 0 0 0 rgba(204, 44, 44, 0.4);
    }
    70% {
        -webkit-box-shadow: 0 0 0 20px rgba(204, 44, 44, 0);
                box-shadow: 0 0 0 20px rgba(204, 44, 44, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(204, 44, 44, 0);
                box-shadow: 0 0 0 0 rgba(204, 44, 44, 0);
    }
  }
  
  
  
  #fields{
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
    height: fit-content;
    width: 50vw;
    border-radius: 20px;
    padding: 20px 10px;
    background: -o-linear-gradient(45deg, #0000007a, transparent);
    background: linear-gradient(45deg, #0000007a, transparent);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    background-repeat: repeat;
    -webkit-backdrop-filter: blur(20px);
    z-index: 97;
  }

  .svg-eremyan-form{
    display: block;
    width: 100%;
    mix-blend-mode: soft-light;
    fill: #bebebe;
  }

  .fill-lighter-form{
    fill: #2e2e2e;
  }
  
  #my_form_contact{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 15px;
  }

  .text-form{
    font-size: 30px;
    font-family: var(--font-text-main);
    font-weight: 400;
    color: var(--color-white);
    text-transform: uppercase;
    text-align: center;
    width: 80%;
    padding: 20px 0px 30px 0px;
    border-bottom: 1px solid var(--color-main);
    margin-bottom: 30px;
  }
  
  #my_form_contact input, textarea{
    border-radius: 5px;
    padding: 7px 7px;
    width: 80%;
    background: transparent;
    color: var(--color-white);
    border: none;
    font-size: 16px;
    font-family: var(--font-text-main);
    font-weight: 400;
  }
  
  #my_form_contact input::-webkit-input-placeholder{
    color: var(--color-white);
    border: none;
    font-size: 16px;
    font-family: var(--font-text-main);
    font-weight: 400;
  }
  
  #my_form_contact input::-moz-placeholder{
    color: var(--color-white);
    border: none;
    font-size: 16px;
    font-family: var(--font-text-main);
    font-weight: 400;
  }
  
  #my_form_contact input:-ms-input-placeholder{
    color: var(--color-white);
    border: none;
    font-size: 16px;
    font-family: var(--font-text-main);
    font-weight: 400;
  }
  
  #my_form_contact input::-ms-input-placeholder{
    color: var(--color-white);
    border: none;
    font-size: 16px;
    font-family: var(--font-text-main);
    font-weight: 400;
  }
  
  #my_form_contact input::placeholder{
    color: var(--color-white);
    border: none;
    font-size: 16px;
    font-family: var(--font-text-main);
    font-weight: 400;
  }


  #my_form_contact input:focus{
    color: var(--color-white);
    border: none;
    font-size: 16px;
    font-family: var(--font-text-main);
    font-weight: 400;
  }

  #my_form_contact input:focus-visible{
    color: var(--color-white);
    border: none;
    font-size: 16px;
    font-family: var(--font-text-main);
    font-weight: 400;
  }


  #my_form_contact button{
    padding: 7px 20px;
    border-radius: 20px;
    border: 1px solid var(--color-main);
    color: var(--color-main);
    font-size: 16px;
    font-family: var(--font-text-main);
    font-weight: 400;
    background: transparent;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }

  #my_form_contact button:hover{
    background-color: var(--color-main);
    color: var(--main-bg-color-dark);
    cursor: none;
  }
  
  .exit-button{
    color: red;
    font-size: 45px;
    font-weight: 100;
    cursor: pointer;
  }

  .text-area-form{
    min-height: 100px;
    overflow: hidden;
  }

  .text-area-form::-webkit-input-placeholder{
    height: 200px;
    color: var(--color-white);
    border: none;
    font-size: 16px;
    font-family: var(--font-text-main);
    font-weight: 400;
  }

  .text-area-form::-moz-placeholder{
    height: 200px;
    color: var(--color-white);
    border: none;
    font-size: 16px;
    font-family: var(--font-text-main);
    font-weight: 400;
  }

  .text-area-form:-ms-input-placeholder{
    height: 200px;
    color: var(--color-white);
    border: none;
    font-size: 16px;
    font-family: var(--font-text-main);
    font-weight: 400;
  }

  .text-area-form::-ms-input-placeholder{
    height: 200px;
    color: var(--color-white);
    border: none;
    font-size: 16px;
    font-family: var(--font-text-main);
    font-weight: 400;
  }

  .text-area-form::placeholder{
    height: 200px;
    color: var(--color-white);
    border: none;
    font-size: 16px;
    font-family: var(--font-text-main);
    font-weight: 400;
  }
  
  .text-area-form:focus{
    color: var(--color-white);
    border: none;
    font-size: 16px;
    font-family: var(--font-text-main);
    font-weight: 400;
  }


  
  
    
  




    @media screen and (min-width:3000px) and (max-width:3500px){ 

      .zayavka-btn{
        zoom: 120%;
      }
      
      .upbtn{
        zoom: 120%;
      }

      .upbtn:after{
        top: 42%;
      }
  }


  @media screen and (min-width:3501px) and (max-width:4000px){ 

    .zayavka-btn{
      zoom: 100%;
    }
    
    .upbtn{
      zoom: 100%;
    }

    .upbtn:after{
      top: 42%;
      -webkit-transform: rotate(-45deg) translateY(-50%) scale(2.3);
          -ms-transform: rotate(-45deg) translateY(-50%) scale(2.3);
              transform: rotate(-45deg) translateY(-50%) scale(2.3);
    }
    .upbtn:before{
      -webkit-transform: rotate(45deg) scale(2.3) translateX(-50%);
          -ms-transform: rotate(45deg) scale(2.3) translateX(-50%);
              transform: rotate(45deg) scale(2.3) translateX(-50%);
    }
}


@media screen and (min-width:4001px) and (max-width:4500px){ 

  .zayavka-btn{
    zoom: 100%;
  }
  
  .upbtn{
    zoom: 100%;
  }

  .upbtn:after{
    top: 45%;
    -webkit-transform: rotate(-45deg) translateY(-50%) scale(2.5);
        -ms-transform: rotate(-45deg) translateY(-50%) scale(2.5);
            transform: rotate(-45deg) translateY(-50%) scale(2.5);
  }

  .upbtn:before{
    -webkit-transform: rotate(45deg) scale(2.5) translateX(-50%);
        -ms-transform: rotate(45deg) scale(2.5) translateX(-50%);
            transform: rotate(45deg) scale(2.5) translateX(-50%);
  }
}