@font-face {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: local('Avenir'), url('fonts/Avenir-Black.ttf') format('truetype');
}

@font-face {
    font-family: 'Avenir';
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: local('Avenir'), url('fonts/Avenir-BlackOblique.ttf') format('truetype');
}

@font-face {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local('Avenir'), url('fonts/Avenir-Book.ttf') format('truetype');
}

@font-face {
    font-family: 'Avenir';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: local('Avenir'), url('fonts/Avenir-BookOblique.ttf') format('truetype');
}

@font-face {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: local('Avenir'), url('fonts/Avenir-Heavy.ttf') format('truetype');
}

@font-face {
    font-family: 'Avenir';
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: local('Avenir'), url('fonts/Avenir-HeavyOblique.ttf') format('truetype');
}

@font-face {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('Avenir'), url('fonts/Avenir-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Avenir';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: local('Avenir'), url('fonts/Avenir-LightOblique.ttf') format('truetype');
}

@font-face {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Avenir'), url('fonts/Avenir-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Avenir';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: local('Avenir'), url('fonts/Avenir-MediumOblique.ttf') format('truetype');
}

@font-face {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Avenir'), url('fonts/Avenir-Roman.ttf') format('truetype');
}

@font-face {
    font-family: 'Avenir';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: local('Avenir'), url('fonts/Avenir-Oblique.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: local('Roboto'), url('fonts/Roboto-Black.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: local('Roboto'), url('fonts/Roboto-BlackItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Roboto'), url('fonts/Roboto-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: local('Roboto'), url('fonts/Roboto-BoldItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Roboto'), url('fonts/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: local('Roboto'), url('fonts/Roboto-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('Roboto'), url('fonts/Roboto-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: local('Roboto'), url('fonts/Roboto-LightItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Roboto'), url('fonts/Roboto-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: local('Roboto'), url('fonts/Roboto-MediumItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('Roboto'), url('fonts/Roboto-Thin.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: local('Roboto'), url('fonts/Roboto-ThinItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Arkibal Display';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Arkibal Display'), url('fonts/ArkibalDisplay-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Arkibal Display';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: local('Arkibal Display'), url('fonts/ArkibalDisplay-BoldItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Arkibal Display';
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: local('Arkibal Display'), url('fonts/ArkibalDisplay-Heavy-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Arkibal Display';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: local('Arkibal Display'), url('fonts/ArkibalDisplay-Heavy.ttf') format('truetype');
}

@font-face {
    font-family: 'Arkibal Display';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('Arkibal Display'), url('fonts/ArkibalDisplay-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Arkibal Display';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: local('Arkibal Display'), url('fonts/ArkibalDisplay-LightItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Arkibal Display';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Arkibal Display'), url('fonts/ArkibalDisplay-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Arkibal Display';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: local('Arkibal Display'), url('fonts/ArkibalDisplay-MediumItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Arkibal Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Arkibal Display'), url('fonts/ArkibalDisplay-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Arkibal Display';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: local('Arkibal Display'), url('fonts/ArkibalDisplay-RegularItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Arkibal Display';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: local('Arkibal Display'), url('fonts/ArkibalDisplay-Thin.ttf') format('truetype');
}

@font-face {
    font-family: 'Arkibal Display';
    font-style: italic;
    font-weight: 200;
    font-display: swap;
    src: local('Arkibal Display'), url('fonts/ArkibalDisplay-ThinItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Sacramento';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Sacramento'), url("fonts/Sacramento-Regular.ttf") format('truetype');
}


.fade-enter{
    opacity: 0;
}
.fade-exit{
    opacity: 1;
}
.fade-enter-active{
    opacity: 1;
}
.fade-exit-active{
    opacity: 0;
}
.fade-enter-active,
.fade-exit-active{
    transition: opacity 500ms;
}

.PhoneInputCountry{
    display: none;
}

.PhoneInputInput{
    border: 1px solid #181818;
    height: 52px;
    width: 100%;
    padding: 16px 18px;
    border-radius: 10px;
    font-size: 14px;
    letter-spacing: 0.02em;
}

.PhoneInputInput:focus{
    border-color: #f44336;
    outline: none;
}

.PhoneInput.error > input{
    border-color: #f44336;
}