:root {
    --breakpoint-xxl: 1920px;
    --breakpoint-xl: 1440px;
    --breakpoint-lg: 1280px;
    --breakpoint-md: 1024px;
    --breakpoint-md-s: 992px;
    --breakpoint-sm: 768px;
    --breakpoint-sm-s: 640px;
    --breakpoint-xs: 512px;
    --breakpoint-xxs: 390px
}

@keyframes loading {
    0% {
        height: 64px;
        top: 8px
    }

    to {
        height: 32px;
        top: 24px
    }
}

.hero-text-search {
    background-color: var(--sk-color-second);
    color: var(--sk-color-second-extra-light);
    padding: 120px 20px
}

@media(max-width:1024px) {
    .hero-text-search {
        padding: 40px 20px
    }
}

.hero-text-search__container {
    margin: 0 auto;
    max-width: 1280px;
    width: 100%
}

.hero-text-search__wrapper {
    display: flex;
    justify-content: space-between
}

@media(max-width:1024px) {
    .hero-text-search__wrapper {
        flex-direction: column
    }
}

.hero-text-search__text {
    margin-right: 20px;
    max-width: 660px;
    width: 100%
}

.hero-text-search__text h1 {
    line-height: 1.25
}

.hero-text-search__text p {
    font-size: 28px;
    letter-spacing: -.42px;
    line-height: 1.14;
    margin-top: 12px
}

@media(max-width:768px) {
    .hero-text-search__text p {
        font-size: 22px
    }
}

.hero-text-search__wrapper-form {
    margin-top: 10px;
    max-width: 515px;
    width: 100%
}

.hero-text-search__wrapper-form .label-input {
    display: block;
    margin-bottom: 24px
}

.hero-text-search__wrapper-input {
    position: relative
}

.hero-text-search__wrapper-input input {
    border: none;
    border-radius: 36px;
    height: 60px;
    margin-bottom: 0;
    padding: 10px 20px 10px 56px;
    width: 100%
}

.hero-text-search__wrapper-input svg {
    left: 12px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.list-area-codes {
    color: var(--sk-color-second);
    min-height: 500px;
    padding: 40px 20px;
    position: relative
}

@media(max-width:1024px) {
    .list-area-codes {
        min-height: 400px
    }
}

@media(max-width:512px) {
    .list-area-codes {
        min-height: 300px
    }
}

.list-area-codes:after {
    background-color: var(--sk-color-third);
    bottom: 0;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .2s;
    transition-timing-function: ease-in-out;
    visibility: hidden;
    width: 100%;
    z-index: 9
}

.list-area-codes.loading:after {
    opacity: .5;
    visibility: visible
}

.list-area-codes .not-found-title {
    display: none;
    font-size: 30px
}

.list-area-codes .not-found-title.active {
    display: block
}

.list-area-codes .loading {
    display: inline-block;
    height: 80px;
    left: calc(50% - 40px);
    opacity: 0;
    position: absolute;
    top: 20px;
    transition: .2s;
    transition-timing-function: ease-in-out;
    visibility: hidden;
    width: 80px
}

.list-area-codes .loading.active {
    opacity: 1;
    visibility: visible
}

.list-area-codes .loading span {
    animation: loading 1.2s cubic-bezier(0, .5, .5, 1) infinite;
    background: var(--sk-color-second);
    display: inline-block;
    left: 8px;
    position: absolute;
    width: 16px
}

.list-area-codes .loading span:first-child {
    animation-delay: -.24s;
    left: 8px
}

.list-area-codes .loading span:nth-child(2) {
    animation-delay: -.12s;
    left: 32px
}

.list-area-codes .loading span:nth-child(3) {
    left: 56px
}

.list-area-codes a {
    color: var(--sk-color-second);
    font-weight: 300
}

.list-area-codes a:focus,
.list-area-codes a:hover {
    color: var(--sk-color-third);
    text-decoration: none
}

.list-area-codes ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.list-area-codes__container {
    margin: 0 auto;
    max-width: 1280px;
    width: 100%
}

.list-area-codes .main-list {
    overflow: hidden
}

.list-area-codes .main-list.sorted li {
    display: none
}

.list-area-codes .main-list.sorted li.active,
.list-area-codes .main-list.sorted li.sorted-active {
    display: block
}

.list-area-codes .main-list__item-dropdown,
.list-area-codes .main-list__state-item-dropdown {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: .2s;
    transition-timing-function: ease-in-out;
    visibility: hidden
}

.list-area-codes .main-list__item-dropdown .main-list__state-wrapper,
.list-area-codes .main-list__state-item-dropdown .main-list__city-wrapper {
    min-height: 0
}

.list-area-codes .main-list__state-item.active .main-list__state-title:before {
    transform: rotate(0)
}

.list-area-codes .main-list__state-item.active .main-list__state-item-dropdown {
    grid-template-rows: 1fr;
    opacity: 1;
    padding-bottom: 34px;
    visibility: visible
}

.list-area-codes .main-list__item.active .main-list__title-county:before {
    transform: rotate(0)
}

.list-area-codes .main-list__item.active .main-list__item-dropdown {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible
}

.list-area-codes .main-list__city-wrapper {
    -moz-columns: 4;
    column-count: 4
}

@media(max-width:1024px) {
    .list-area-codes .main-list__city-wrapper {
        -moz-columns: 2;
        column-count: 2
    }
}

@media(max-width:512px) {
    .list-area-codes .main-list__city-wrapper {
        -moz-columns: 1;
        column-count: 1
    }
}

.list-area-codes .main-list__city-item {
    padding-left: 32px;
    position: relative
}

.list-area-codes .main-list__city-item:after {
    background-color: var(--sk-color-second);
    border-radius: 50%;
    content: "";
    height: 4px;
    left: 10px;
    position: absolute;
    top: calc(50% - 2px);
    width: 4px
}

.list-area-codes .main-list__state-title,
.list-area-codes .main-list__title-county {
    cursor: pointer;
    display: inline-block;
    padding-left: 32px;
    position: relative;
    text-transform: uppercase
}

.list-area-codes .main-list__state-title:after,
.list-area-codes .main-list__state-title:before,
.list-area-codes .main-list__title-county:after,
.list-area-codes .main-list__title-county:before {
    background-color: var(--sk-color-second-extra-light);
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    top: 50%;
    transition: .2s;
    transition-timing-function: ease-in-out;
    width: 16px
}

.list-area-codes .main-list__state-title:before,
.list-area-codes .main-list__title-county:before {
    transform: rotate(90deg)
}

.list-area-codes .main-list__title-county {
    font-family: var(--sk-font-primary);
    font-size: 48px;
    font-weight: 500;
    margin-bottom: 20px
}

.list-area-codes .main-list__state-title {
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 36px
}

/*# sourceMappingURL=area-code-template.css.map*/