/* Website package */
.website-package {
    padding: 60px 15px;
}
.website-package:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 250px;
    background-color: #ff6e3f;
}
body.archive .website-package {
    padding: 60px 0;
}
body.archive .website-package:before {
    display: none;
}
.website-package .website-package-nav ul {
    text-align: center;
    padding: 0;
}
.website-package .website-package-nav ul li {
    list-style: none;
    display: inline-block;
    vertical-align: middle;
    margin: 5px 5px;
    color: #ffffff;
    text-transform: uppercase;
    padding: 5px 15px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 3px;
    cursor: pointer;
}
.website-package .website-package-nav ul li:hover, .website-package .website-package-nav ul li:focus, .website-package .website-package-nav ul li.active {
    color: #000000;
    background-color: #ffffff;
}
.website-package .package-list {
    margin-bottom: 30px;
    border-bottom: 1px solid #ccc;
}
.website-package article.post-package {
    border: 1px solid #cccccc;
    margin-bottom: 50px;
    -webkit-box-shadow: 0px 5px 5px 0px rgb(0 0 0 / 25%);
    -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 5px 5px 0px rgb(0 0 0 / 25%);
    display: none;
}
.website-package .package-loader img {
    margin: 0 auto;
    display: block;
    padding: 30px 0;
}
.website-package .package-vertical-name {
    background-color: #4364f7;
    color: #ffffff;
    font-size: 25px;
    margin-bottom: 15px;
    padding: 5px 15px;
    text-align: center;
}
.website-package .package-image {
    height: auto;
    aspect-ratio: 3 / 2;
    background-size: cover;
    background-position: top center;
    -webkit-box-shadow: 0px 10px 10px 0px rgb(0 0 0 / 10%);
    -moz-box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.10);
    box-shadow: 0px 10px 10px 0px rgb(0 0 0 / 10%);
}
.website-package .package-details {
    padding: 15px 15px;
}
.website-package .package-title {
    font-size: 20px;
}
.website-package .package-date {
    padding: 5px 0;
}
.website-package .package-date:before {
    content: "\f073";
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    margin-right: 5px;
}
.website-package .package-content {
    font-size: 16px;
    padding-bottom: 20px;
}
.website-package .package-features {
    margin-bottom: 20px;
}
.website-package .package-feature-246 a:before, .single-package-post .package-features li#single-feature-246 a:before {
    content: url(/wp-content/themes/surefirelocal/images/web-packages/call-to-action-icon.png);
}
.website-package .package-feature-245 a:before, .single-package-post .package-features li#single-feature-245 a:before {
    content: url(/wp-content/themes/surefirelocal/images/web-packages/accordion-icon.png);
}
.website-package .package-feature-248 a:before, .single-package-post .package-features li#single-feature-248 a:before {
    content: url(/wp-content/themes/surefirelocal/images/web-packages/photo-gallery-icon.png);
}
.website-package .package-feature-247 a:before, .single-package-post .package-features li#single-feature-247 a:before {
    content: url(/wp-content/themes/surefirelocal/images/web-packages/contact-form-icon.png);
}
.website-package .package-feature-249 a:before, .single-package-post .package-features li#single-feature-249 a:before {
    content: url(/wp-content/themes/surefirelocal/images/web-packages/social-media-icon.png);
}
.website-package .package-feature a:hover:before, .website-package .package-feature a:focus:before {
    filter: invert(31%) sepia(38%) saturate(5667%) hue-rotate(224deg) brightness(102%) contrast(94%);
}
.website-package .package-feature a span {
    display: none;
}
.website-package .pack-title {
    text-align: center;
}
.website-package .package-features-listing {
    background-color: #eef5f6;
    text-align: center;
}
.website-package .package-features-listing .package-feature {
    display: inline-block;
    vertical-align: middle;
    padding: 0 10px;
    margin: 3px 0;
}
.website-package .package-post {
    text-align: center;
    margin: -20px 10px 0;
    top: 20px;
}
.website-package .package-post a {
    display: block;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #ffffff;
}
.website-package article.post-package:hover .package-image {
    -webkit-box-shadow: 0px 10px 10px 0px rgb(0 0 0 / 25%);
    -moz-box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 10px 10px 0px rgb(0 0 0 / 25%);
}
.website-package article.post-package:hover {
    border: 1px solid #4364f7;
}
.website-package article.post-package:hover .package-post a {
    border: 1px solid #4364f7;
    background-color: #4364f7;
    color: #ffffff;
}
.website-package .package-more {
    padding: 30px 0;
}
.website-package .package-more a {
    display: none;
    background-color: #4364f7;
    color: #ffffff;
    padding: 10px 30px;
    border-radius: 3px;
    cursor: pointer;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
}
.website-package .package-more a:after {
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    content: "\f0d7";
    transition: all 0.3s;
    margin-left: 10px;
}
.website-package .package-no-result {
    text-align: center;
}

/* Website Single Package */
.single-package-post .single-package-banner {
    height: 250px;
    background-position: right top;
}
.single-package-post .banner-sub-title {
    font-size: 16px;
    line-height: 1.2;
}
.single-package-post .banner-title {
    font-size: 40px;
    line-height: 1.2;
}
.single-package-post .single-package-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}
.single-package-post .single-package-designs:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 300px;
    background-color: #ff6e3f;
}
.single-package-post .single-package-title {
    padding: 0 60px;
}
.single-package-post .single-package-title h1 {
    color: #ffffff;
    font-size: 25px;
}
.single-package-post .single-package-title a.back-to-packages {
    position: absolute;
    left: 55px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    line-height: 1;
    color: #000000;
    padding: 20px 22px;
    background-color: #ffffff;
    border-radius: 50%;
}
.single-package-post .diplay-design-nav {
    text-align: center;
    padding-top: 60px;
}
.single-package-post .diplay-design-nav > div {
    display: inline-block;
    vertical-align: middle;
}
.single-package-post .diplay-design-nav > div a {
    color: #4364f7;
    text-transform: uppercase;
    font-size: 16px;
}
.single-package-post .diplay-design-nav > div a:after {
    content: "\f105";
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    margin-left: 5px;
}
.single-package-post .diplay-design-nav .design-view-all a, .single-package-post .diplay-design-nav .design-view-sample a, .single-package-post .diplay-design-nav .ds-view-popup a {
    border: 2px solid #4364f7;
    border-radius: 3px;
    padding: 5px 25px;
    margin: 5px 5px;
    min-width: 220px;
    cursor: pointer;
}
.single-package-post .diplay-design-nav .ds-view-popup a {
    display: block;
}
.single-package-post .diplay-design-nav .design-view-all a {
    display: block;
}
.single-package-post .single-package-designs .site-design {
    display: none;
}
.single-package-post .single-package-designs .site-design.active {
    display: block;
}
.single-package-post .design-view-sample .ds-view-btn {
    display: none;
}
.single-package-post .design-view-sample .ds-view-btn.active {
    display: block;
}
.single-package-post .design-image-content .laptop-image-wrap {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: block;
}
.single-package-post .design-image-content .laptop-monitor {
    border: 25px solid #3a383a;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom: 40px solid #3a383a;
    margin: 0 20px;
}
.single-package-post .design-image-content .lp-monitor-head {
    background-color: #dbdadb;
    padding-bottom: 10px;
}
.single-package-post .design-image-content .lp-monitor-screen {
    overflow: hidden;
    width: 100%;
    position: relative;
}
.single-package-post .design-image-content .lp-monitor-screen-image {
    height: 500px;
    overflow: auto;
    background-color: #ffffff;
}
.single-package-post .design-image-content .lp-monitor-screen-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
}
.single-package-post .single-package-info, .single-package-post .single-package-designs {
    padding: 60px 0;
}
.single-package-post .single-package-info-heading {
    font-size: 35px;
    line-height: 1.2;
    margin-bottom: 60px;
}
.single-package-post .package-details-col {
    border: 1px solid #cccccc;
    margin-top: 85px;
    margin-bottom: 20px;
}
.single-package-post .single-package-icon {
    top: -85px;
}
.single-package-post .single-package-icon {
    top: -85px;
    margin-bottom: -55px;
}
.single-package-post .single-package-icon img {
    display: block;
    margin: 0 auto;
}
.single-package-post .package-details-info {
    padding: 30px 30px;
}
.single-package-post .package-details-info label {
    font-weight: bold;
    font-size: 18px;
    display: block;
    margin-bottom: 15px;
}
.single-package-post .package-details-info ul {
    text-align: center;
}
.single-package-post .package-details-info ul li:before {
    display: none;
}
.single-package-post .package-details-info ul li {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    padding: 0;
}
.single-package-post .package-details-info .package-features ul li {
    display: block;
}
.single-package-post .package-features ul li a {
    padding-left: 30px;
}
.single-package-post .package-features ul li a:before {
    position: absolute;
    left: 0;
}
.single-package-post .package-features ul {
    text-align: left;
}
.single-package-post .phone-image-wrap {
    width: 100%;
    max-width: 322px;
    margin: 0 auto;
}
.single-package-post .phone-view {
    background-size: contain;
    min-height: 647px;
    overflow: hidden;
}
.single-package-post .phone-view-screen {
    width: 100%;
    max-width: 280px;
    margin: 92px auto 0;
    height: 535px;
    background-color: white;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    overflow: hidden;
}
.single-package-post .phone-view-screen-image {
    height: 100%;
    overflow: auto;
}
.single-package-post .phone-view-screen-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
}
.single-package-post .lp-monitor-screen-image::-webkit-scrollbar-track, .single-package-post .phone-view-screen-image::-webkit-scrollbar-track, .mockup-popup-images .mockup-image::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 1);
    background-color: #f1f1f1;
}
.single-package-post .lp-monitor-screen-image::-webkit-scrollbar, .single-package-post .phone-view-screen-image::-webkit-scrollbar, .mockup-popup-images .mockup-image::-webkit-scrollbar {
    width: 6px;
    background-color: #f1f1f1;
}
.single-package-post .lp-monitor-screen-image::-webkit-scrollbar-thumb, .single-package-post .phone-view-screen-image::-webkit-scrollbar-thumb, .mockup-popup-images .mockup-image::-webkit-scrollbar-thumb {
    background-color: #f1f1f1;
}
.mockup-popup-images {
    position: fixed;
    z-index: 99999;
    width: 100%;
    height: 100vh;
    top: 0;
    background-color: rgba(0, 0, 0, 0.70);
    left: -100%;
}
.mockup-popup-images.active {
    left: 0;
}
.mockup-popup-images .mockup-popup-wrap {
    padding: 60px 0;
    height: 100vh;
}
.mockup-popup-images .mockup-listings {
    width: 100%;
    height: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 30px;
    overflow: hidden;
}
.mockup-popup-images .mockup-image {
    overflow: auto;
    background-color: transparent;
    height: 100vh;
}
.mockup-popup-images .mockup-image img {
    margin: 0 auto;
}
.mockup-popup-images .close-popup {
    position: absolute;
    right: 0;
    top: 0;
    color: #000000;
    padding: 10px 15px;
    background-color: #ffffff;
    line-height: 1;
    margin: 5px;
    cursor: pointer;
}
.mockup-popup-images .mockup-control .left, .mockup-popup-images .mockup-control .right {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #000000;
    cursor: pointer;
    background-color: #ffffff;
    padding: 15px 5px;
    font-size: 14px;
}
.mockup-popup-images .mockup-control .left {
    left: 0;
}
.mockup-popup-images .mockup-control .right {
    right: 0;
}

/* Package Filter */
.package-filter-section {
    position: fixed;
    top: 0;
    left: -100%;
    z-index: 999;
    width: 100%;
    height: 100vh;
    padding: 60px 15px;
    background-color: #ffffff;
    transition: all 0.5s ease;
}
.package-filter-section.active {
    left: 0;
    transition: all 0.5s ease;
}
.package-filter-close {
    position: absolute;
    right: 0px;
    cursor: pointer;
    top: -40px;
    z-index: 1;
    font-size: 13px;
    color: #a4a4a4;
}
.package-filter-close > * {
    display: inline-block;
    vertical-align: middle;
}
.package-filter-close span {
    color: #000000;
    font-size: 20px;
}
.package-filter-wrap {
    overflow: auto;
    height: 85vh;
}
.package-filter .item-filter .filter-label.main-label {
    font-size: 22px;
}
.package-filter .item-filter .filter-label {
    font-weight: bold;
    padding: 10px 0;
    display: block;
    border-bottom: 1px solid #cccccc;
}
.package-filter .filter-package-items {
    padding: 15px 0;
}
.filter-package-items .input-btn, .filter-package-items .service-btn {
    display: inline-block;
    vertical-align: middle;
    margin: 2px 0;
    width: 150px;
    height: 40px;
}
.filter-package-items .input-btn label, .filter-package-items .input-btn input, .filter-package-items .service-btn label, .filter-package-items .service-btn input {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    z-index: 90;
    line-height: 1.8em;
}
.filter-package-items .input-btn input, .filter-package-items .service-btn input {
    opacity: 0.011;
    z-index: 100;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    border: 1px solid #edf5f7;
}
.filter-package-items .input-btn label, .filter-package-items .service-btn label {
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: inherit;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 12px;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    background-image: none;
    border-radius: 4px;
    color: #333;
    background-color: #fff;
    border-color: #ccc;
    max-width: 100%;
    margin: 0;
    font-weight: 700;
}
.filter-package-items .input-btn input + label, .filter-package-items .service-btn input + label {
    background: #edf5f7;
}
.filter-package-items .input-btn input:checked + label, .filter-package-items .service-btn input:checked + label {
    background: #4364f7;
    color: #ffffff;
}
.package-filter .package-filter-submit {
    padding: 30px 0;
}
.package-filter .package-filter-submit button {
    background-color: transparent;
    color: #000000;
    text-transform: uppercase;
    font-size: 14px;
    border: 1px solid #cccccc;
    border-radius: 3px;
    margin: 4px 0;
}
.package-filter .package-filter-submit button.filter-submit, .package-filter .package-filter-submit button:hover {
    background-color: #4364f7;
    color: #ffffff;
}

/* Single Web Package */
.create-package-design {
    column-count: 1;
    padding-bottom: 30px;
}
.package-step .package-step-heading {
    background: #ff6e3f;
    padding: 30px 60px;
    min-height: 200px;
}
.package-step .pack-heading-wrap, .package-step .pack-content-wrap {
    width: calc(100% - 560px);
    margin: 0 0 0 auto;
}
.package-step .package-step-content {
    padding: 30px 60px;
}
.package-design .package-left {
    position: absolute;
    top: 30px;
    left: 60px;
    width: 500px;
}
.package-design .package-info-wrap {
    padding: 15px 15px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
}
.package-design .package-left .package-title {
    color: #ffffff;
    margin-bottom: 40px;
    font-size: 18px;
}
.package-info .package-date {
    color: #8b8787;
}
.package-info .package-date:before {
    content: "\f073";
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    margin-right: 5px;
    color: #000000;
}
.package-step-1 .pack-content-wrap {
    top: -130px;
    margin-bottom: -130px;
}
.package-step-1 .pack-selected-template {
    margin-top: 60px;
}
.package-step-1 .desktop-image-wrap, .pack-right-summary .desktop-image-wrap {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: block;
}
.package-step-1 .desktop-monitor, .pack-right-summary .desktop-monitor {
    border: 25px solid #3a383a;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom: 40px solid #3a383a;
    margin: 0 20px;
}
.package-step-1 .desktop-monitor-head, .pack-right-summary .desktop-monitor-head {
    background-color: #dbdadb;
    padding-bottom: 10px;
}
.package-step-1 .desktop-monitor-screen, .pack-right-summary .desktop-monitor-screen {
    overflow: hidden;
    width: 100%;
    position: relative;
}
.package-step-1 .desktop-monitor-screen-image, .pack-right-summary .desktop-monitor-screen-image {
    height: 500px;
    overflow: auto;
    background-color: #ffffff;
}
.package-step-1 .mobile-image-wrap {
    width: 100%;
    max-width: 322px;
    margin: 0 auto;
}
.package-step-1 .mobile-image-wrap .mobile-view {
    background-size: contain;
    min-height: 647px;
    overflow: hidden;
}
.package-step-1 .mobile-view-screen {
    width: 100%;
    max-width: 280px;
    margin: 92px auto 0;
    height: 535px;
    background-color: white;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    overflow: hidden;
}
.package-step-1 .mobile-view-screen-image {
    height: 100%;
    overflow: auto;
}
.package-step-1 .desktop-monitor-screen-image::-webkit-scrollbar-track, .pack-right-summary .desktop-monitor-screen-image::-webkit-scrollbar-track, .package-step-1 .mobile-view-screen-image::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 1);
    background-color: #f1f1f1;
}
.package-step-1 .desktop-monitor-screen-image::-webkit-scrollbar, .pack-right-summary .desktop-monitor-screen-image::-webkit-scrollbar, .package-step-1 .mobile-view-screen-image::-webkit-scrollbar {
    width: 6px;
    background-color: #f1f1f1;
}
.package-step-1 .desktop-monitor-screen-image::-webkit-scrollbar-thumb, .pack-right-summary .desktop-monitor-screen-image::-webkit-scrollbar-thumb, .package-step-1 .mobile-view-screen-image::-webkit-scrollbar-thumb {
    background-color: #f1f1f1;
}
.package-step-1 .pack-selected-template label {
    pointer-events: none;
}
.package-step-1 .pack-selected-template label, .package-step-2 .pack-selected-website label, .st-slct-radio label {
    padding-left: 40px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}
.package-step-1 .pack-selected-template label input, .package-step-2 .pack-selected-website label input, .st-slct-radio label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.package-step-1 .pack-selected-template label .checkmark, .package-step-2 .pack-selected-website label .checkmark, .st-slct-radio label .checkmark {
    position: absolute;
    left: 0;
    top: auto;
    height: 30px;
    width: 30px;
    background-color: #ccc;
    border-radius: 3px;
}
.package-step-1 .pack-selected-template label:hover input ~ .checkmark, .package-step-2 .pack-selected-website label:hover input ~ .checkmark, .st-slct-radio label:hover input ~ .checkmark {
    background-color: #ccc;
}
.package-step-1 .pack-selected-template label input:checked ~ .checkmark, .package-step-2 .pack-selected-website label input:checked ~ .checkmark, .st-slct-radio label input:checked ~ .checkmark {
    background-color: #2196F3;
}
.package-step-1 .pack-selected-template label input:checked ~ .checkmark:after, .package-step-2 .pack-selected-website label input:checked ~ .checkmark:after, .st-slct-radio label input:checked ~ .checkmark:after {
    display: block;
}
.package-step-1 .pack-selected-template label .checkmark:after, .package-step-2 .pack-selected-website label .checkmark:after, .st-slct-radio label .checkmark:after {
    content: "";
    position: absolute;
    left: 11px;
    top: 6px;
    width: 8px;
    height: 14px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.package-step-1 .pack-design-view .pack-design {
    display: none;
}
.package-step-1 .pack-design-view .pack-design.active {
    display: block;
}
.package-step-1 .pack-view-template a {
    display: inline-block;
    vertical-align: middle;
    padding: 7px 15px;
    text-transform: uppercase;
    font-size: 14px;
    border: 1px solid #ffffff;
    border-radius: 3px;
    cursor: pointer;
    color: #ffffff;
}
.package-step-1 .pack-view-template a:hover {
    background-color: #4364f7;
}
.package-step-1 .pack-view-template a:after {
    content: "\f105";
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    margin-left: 5px;
}
.package-step-1 .pack-view-template a.pack-view-btn {
    display: none;
}
.package-step-1 .pack-view-template a.pack-view-btn.active {
    display: inline-block;
}
.package-step-1 .pack-back-package a:before, span.nav-text.nav-text-back:before {
    content: "\f060";
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    font-size: 14px;
    margin-right: 10px;
    padding: 10px 11px;
    border: 1px solid #000000;
    border-radius: 50%;
    background: #ffffff;
    color: #000000;
}
.package-step-2 .package-step-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}
.package-step-items .step-title {
    margin-bottom: 30px;
    font-size: 22px;
}
.package-step-2 .pack-existing-web-image {
    text-align: center;
    margin-bottom: 30px;
    top: -55px;
}
.package-step-2 .pack-existing-website {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
}
.package-step-2 .pack-existing-website label {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
}
.package-step-2 .pack-existing-website input {
    border: 1px solid #000000;
    border-radius: 3px;
    padding: 10px 10px 10px 35px;
}
.package-step-2 .pack-existing-website:before {
    content: "\f0ac";
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    position: absolute;
    bottom: 8px;
    left: 10px;
}
.package-step-3 .pack-color-selector {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 60px;
}
.package-step-3 .pack-color-item:not(:last-child) {
    margin-bottom: 30px;
}
.package-step-3 .pack-select-color .input-color {
    border: 1px solid #cccccc;
    border-radius: 3px;
    padding: 10px 54px 10px 10px;
}
.package-step-3 .pack-select-color .select-color {
    padding: 0;
    border: 0;
    position: absolute;
    right: 0;
    width: 44px;
    height: 44px;
    background: transparent;
    cursor: pointer;
}
.package-step-4 .pack-font-selector {
    margin-bottom: 60px;
}
.package-step-4 .select-font {
    margin: 15px 0 15px;
}
.package-step-4 .font-sample-image {
    padding: 30px 0;
}
.package-step-4 .font-sample-image .font-img-wrap {
    display: none;
    padding: 15px 15px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
}
.package-step-4 .font-sample-image img {
    margin: 0 auto;
    padding: 15px 15px;
}
.package-step-4 .select-font select {
    border: 1px solid #cccccc;
    border-radius: 3px;
    padding: 10px 10px 10px 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #000 50%), linear-gradient(135deg, #000 50%, transparent 50%), linear-gradient(to right, #000, #000);
    background-position: calc(100% - 18px) calc(1em + 0px), calc(100% - 10px) calc(1em + 0px), calc(100% - 2.5em) 0.5em;
    background-size: 8px 9px, 8px 9px, 0px 0em;
    background-repeat: no-repeat;
    font-weight: 500;
    min-height: 44px;
}
.package-step-4 .custom-font input {
    border: 1px solid #cccccc;
    border-radius: 3px;
}
.package-steps .step-nav-tabs {
    text-align: center;
    padding-bottom: 30px;
    border-bottom: 1px solid #cccccc;
    margin-bottom: 30px;
}
.package-steps .step-nav-tabs .st-nav-tab {
    display: inline-block;
    vertical-align: middle;
    color: #4364f7;
    padding: 0 20px;
    cursor: pointer;
}
.package-steps .step-nav-tabs .st-nav-tab:not(:last-child):after {
    content: "\f111";
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    font-size: 5px;
    position: absolute;
    right: -5px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.package-steps .st-tab-title {
    font-size: 25px;
    line-height: 1.2;
    margin-bottom: 15px;
}
.package-steps .st-tab-desc {
    margin-bottom: 30px;
}
.package-steps .step-item-tabs .st-cont-item {
    display: none;
}
.package-steps .step-item-tabs .st-cont-item:first-child {
    display: block;
}
.package-steps .st-tab-img {
    margin-bottom: 60px;
}
.package-steps .pack-left-summary {
    border: 1px solid #cccccc;
    padding: 20px 15px;
}
.package-steps .pack-sum-title {
    margin-bottom: 30px;
}
.package-steps .pack-summary .temp-feature:nth-child(even) .slct-temp-ft {
    background: #edf5f7;
}
.package-steps .pack-summary .slct-temp-ft {
    width: calc(100% - 250px);
    padding: 25px 15px;
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: left;
}
.package-steps .pack-summary .dply-temp-ft {
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cccccc;
}
.package-steps .color-pack-ft .dply-temp-ft-wrap > div, .package-left .ft-color-items .slct-temp-clr {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    background: #000000;
    border: 1px solid #cccccc;
}
.package-steps .pack-summary .font-pack-ft .slctd-img {
    padding: 5px 0;
}
.package-steps .pack-summary .font-pack-ft .slctd-img img {
    padding: 0 15px;
}
.package-steps .pack-summary .temp-feature .slctd-img img {
    padding: 15px 15px;
}
.package-steps .pack-summary .sum-prev-title, .package-steps .pack-sum-title {
    font-size: 20px;
}
.package-steps .pack-summary .slctd-item, .package-steps .pack-summary .sum-info-text {
    color: #4364f7;
    font-size: 16px;
}
.package-steps .pack-right-summary .desktop-image-wrap {
    max-width: 600px;
}
.pack-right-summary .desktop-monitor-screen-image {
    height: 245px;
}
.pack-right-summary .sum-temp-preview {
    margin-bottom: 30px;
}
.pack-right-summary .sum-pack-details {
    padding: 20px 15px;
    border: 1px solid #cccccc;
    border-radius: 3px;
    margin-bottom: 30px;
}
.pack-right-summary .sum-pack-details hr {
    margin: 15px 0;
}
.package-steps .slct-temp-label {
    font-size: 14px;
    color: #626262;
}
.package-info .package-image {
    margin-bottom: 30px;
}
.package-info .package-image img {
    -webkit-box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.25);
}
.pack-right-summary .sum-pack-details .sum-prev-detail:not(:last-child) {
    margin-bottom: 15px;
}
.package-left .package-info-wrap h2 {
    font-size: 20px;
    padding: 0;
}
.package-left .package-info-wrap hr {
    margin: 15px 0;
}
.package-left .package-details {
    padding-bottom: 30px;
}
.package-left .pack-detail-info {
    margin-bottom: 15px;
}
.package-left .pack-feature-info:not(:last-child) {
    margin-bottom: 30px;
}
.package-left .pack-detail-info .pack-label, .package-left .pack-feature-info .pack-label {
    font-size: 14px;
}
.package-left .pack-item-dtls {
    font-size: 16px;
}
.package-left .temp-feature {
    color: #4364f7;
    font-size: 16px;
}
.package-steps .package-step {
    display: none;
}
.package-steps .package-step.active {
    display: block;
}
.active-step.step-1 .package-image {
    display: none;
}
.package-description {
    display: none;
}
.active-step.step-1 .package-description {
    display: block;
}
.active-step.step-1 .step-nav-back {
    display: none;
}
.package-step-navigation .step-nav-back {
    position: absolute;
    top: 35px;
    right: 60px;
    color: #ffffff;
}
.package-step-navigation .step-nav-back .nav-text-back {
    cursor: pointer;
}
.package-step-navigation .nav-text-next:after {
    content: "\f105";
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    margin-left: 5px;
}
.package-step-navigation .step-nav-next {
    position: absolute;
    right: 60px;
    bottom: 0;
    display: flex;
    align-items: center;
}
.package-step-navigation .step-nav-next .nav-text-next {
    padding: 10px 20px;
    border: 2px solid #cccccc;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 14px;
    display: block;
    border-radius: 3px;
}
.package-step-navigation .step-nav-next .nav-text-next:hover {
    background: #2196f3;
    color: #ffffff;
}
.active-step.step-12 .step-nav-next {
    display: none;
}
.active-step.step-2 .package-left, .active-step.step-12 .package-left {
    display: none;
}
.active-step.step-2 .pack-content-wrap, .active-step.step-2 .pack-heading-wrap, .active-step.step-12 .pack-content-wrap, .active-step.step-12 .pack-heading-wrap {
    width: 100%;
}
.package-step-navigation .step-nav-next .nav-tx-next {
    font-size: 14px;
    margin-right: 10px;
}
.package-left .package-features, .package-left .pack-feature-info {
    display: none;
}
.package-form input#gform_submit_button_3 {
    background: #ffffff;
    color: #4364f7;
    border: 2px solid #4364f7;
    border-radius: 5px;
    padding: 10px 50px;
}
.package-form input#gform_submit_button_3:hover {
    background: #4364f7;
    color: #ffffff;
}

/* New Web Package Form */
.web-package-design {
    column-count: 1;
    margin-bottom: 30px;
}
.web-package-design .wiz-control {
    text-align: right;
}
.web-package-design aside.wizard-nav.dots {
    display: none;
}
.web-package-design aside.wizard-content {
    padding: 0 0 30px 0;
}
.pkg-step-header {
    background: #ff6e3f;
    padding: 30px 15px;
    min-height: 200px;
}
.pkg-step-header .pkg-step-title {
    font-size: 22px;
    margin-bottom: 15px;
}
.pkg-step-header .view-pkg {
    display: inline-block;
    vertical-align: middle;
    padding: 7px 15px;
    margin: 5px 0;
    text-transform: uppercase;
    font-size: 14px;
    border: 1px solid #ffffff;
    border-radius: 3px;
    cursor: pointer;
}
.pkg-step-header .view-pkg:hover {
    background-color: #4364f7;
    border: 1px solid #4364f7;
    color: #ffffff;
}
.pkg-step-header .pack-view {
    display: none;
}
.pkg-step-header .pack-view.active {
    display: inline-block;
}
.pkg-step-header .view-pkg:after {
    content: "\f105";
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    margin-left: 5px;
}
.pkg-step-header .view-all-package:before {
    content: "\f060";
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    font-size: 14px;
    margin-right: 10px;
    padding: 10px 11px;
    border: 1px solid #000000;
    border-radius: 50%;
    background: #ffffff;
    color: #000000;
}
.pkg-step-header div#pkg-other-url-field, .pkg-step-header div#pkg-client-id-field {
    width: 100%;
    max-width: 450px;
    margin: 30px auto 0;
}
.pkg-step-header label.other-url, .pkg-step-header label.client-id {
    font-size: 12px;
    display: inherit;
}
.pkg-step-header input#other-url, .pkg-step-header input#client-id {
    border: 1px solid #cccccc;
    border-radius: 3px;
}
.pkg-step-body .pkg-design-items {
    top: -20px;
    margin-bottom: -20px;
}
.pkg-step-body .desk-image-wrap {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 60px;
}
.pkg-step-body .desk-image-wrap .desk-monitor {
    border: 25px solid #3a383a;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom: 40px solid #3a383a;
    margin: 0 20px;
}
.pkg-step-body .desk-image-wrap .desk-monitor-head {
    background-color: #dbdadb;
    padding-bottom: 10px;
}
.pkg-step-body .desk-image-wrap .desk-monitor-screen {
    overflow: hidden;
    width: 100%;
    position: relative;
}
.pkg-step-body .desk-image-wrap .desk-monitor-screen-image {
    height: 160px;
    overflow: auto;
    background-color: #ffffff;
}
.pkg-step-body .mob-image-wrap {
    width: 100%;
    max-width: 322px;
    margin: 0 auto;
}
.pkg-step-body .mob-image-wrap .mob-view {
    background-size: contain;
    min-height: 647px;
    overflow: hidden;
}
.pkg-step-body .mob-view-screen {
    width: 100%;
    max-width: 280px;
    margin: 92px auto 0;
    height: 535px;
    background-color: white;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    overflow: hidden;
}
.pkg-step-body .mob-view-screen-image {
    height: 100%;
    overflow: auto;
}
.pkg-step-body .desk-image-wrap .desk-monitor-screen-image::-webkit-scrollbar-track, .pkg-step-body .mob-view-screen-image::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 1);
    background-color: #f1f1f1;
}
.pkg-step-body .desk-image-wrap .desk-monitor-screen-image::-webkit-scrollbar, .pkg-step-body .mob-view-screen-image::-webkit-scrollbar {
    width: 6px;
    background-color: #f1f1f1;
}
.pkg-step-body .desk-image-wrap .desk-monitor-screen-image::-webkit-scrollbar-thumb, .pkg-step-body .mob-view-screen-image::-webkit-scrollbar-thumb {
    background-color: #f1f1f1;
}
.pkg-step-body .pkg-design {
    display: none;
}
.pkg-step-body .pkg-design.active {
    display: block;
    margin-bottom: 60px;
}
.pkg-step-body .other-url-image img {
    top: -30px;
}
.pkg-step-body .pkg-clr-input input.pkg-sl-clr {
    padding: 0;
    border: 0;
    position: absolute;
    right: 0;
    width: 44px;
    height: 44px;
    background: transparent;
    cursor: pointer;
}
.pkg-step-body div#pkg-color-field {
    width: 100%;
    max-width: 600px;
    margin: 30px auto 0;
}
.pkg-step-body input.pkg-clr {
    border: 1px solid #cccccc;
    border-radius: 3px;
}
.pkg-step-body .pkg-clr-inputs:not(:last-child) {
    margin-bottom: 30px;
}
.pkg-step-body .pkg-text-desc {
    font-size: 14px;
    margin-bottom: 5px;
}
.custom-desc {
    padding: 10px 0 0;
}
.pkg-step-body .pkg-font {
    margin-top: 30px;
}
.pkg-step-body .pkg-font label {
    display: block;
    margin: 5px 0;
}
.pkg-step-body .font-smpl-img {
    padding: 30px 0;
}
.pkg-step-body .font-smpl-img .font-img-wrap {
    display: none;
}
.pkg-step-body .pkg-slct-font select {
    border: 1px solid #cccccc;
    border-radius: 3px;
    padding: 10px 10px 10px 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #000 50%), linear-gradient(135deg, #000 50%, transparent 50%), linear-gradient(to right, #000, #000);
    background-position: calc(100% - 18px) calc(1em + 0px), calc(100% - 10px) calc(1em + 0px), calc(100% - 2.5em) 0.5em;
    background-size: 8px 9px, 8px 9px, 0px 0em;
    background-repeat: no-repeat;
    font-weight: 500;
    min-height: 44px;
}
.pkg-step-body .custom-font .cstm-fnt {
    border: 1px solid #cccccc;
    border-radius: 3px;
    display: none;
}
.pkg-step-body .pkg-stp-cont-item {
    display: none;
}
.pkg-step-body .pkg-stp-cont-item:first-child {
    display: block;
}
.pkg-step-body .pkg-nav-tabs {
    text-align: center;
    margin-bottom: 40px;
}
.pkg-step-body .pkg-stp-nav {
    display: inline-block;
    vertical-align: middle;
    color: #4364f7;
    padding: 15px 20px;
    cursor: pointer;
    font-size: 16px;
}
.pkg-step-body .pkg-stp-nav:not(:last-child):after {
    content: "\f111";
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    font-size: 5px;
    position: absolute;
    right: -5px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.pkg-step-body .pkg-stp-nav.active {
    border-top: 5px solid #ff6e3f;
}
.pkg-step-body .stp-tab-title {
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 15px;
}
.pkg-step-body .stp-tab-desc {
    margin-bottom: 30px;
    font-size: 16px;
}
.pkg-step-body .stp-tab-img {
    margin-bottom: 60px;
}
.pkg-step-header .pkg-header-wrap {
    margin: 0 0 0 auto;
    justify-content: center;
    flex-direction: column-reverse;
}
.pkg-step-header .pkg-header-wrap > div {
    width: 100%;
    text-align: center;
    margin: 10px 0;
}
.pkg-step-body {
    margin: 0 0 0 auto;
    padding: 0 15px;
}
.cur-step-2 .pkg-step-body, .cur-step-2 .pkg-step-header .pkg-header-wrap, .cur-step-12 .pkg-step-body, .cur-step-12 .pkg-step-header .pkg-header-wrap {
    width: 100%;
}
.cur-step-2 .web-package-summary, .cur-step-12 .web-package-summary {
    display: none;
}
.pkg-step-body .pkg-summary {
    padding-top: 30px;
    flex-direction: column-reverse;
}
.pkg-sum-right .desk-image-wrap {
    max-width: 600px;
    margin: 0 auto 30px;
}
.pkg-step-body .pkg-sum-right  .desk-monitor-screen-image {
    height: 260px;
}
.pkg-sum-dtls {
    padding: 30px 15px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    margin-bottom: 30px;
}
.pkg-sum-dtls .pkg-sum-hd {
    font-size: 20px;
    line-height: 1.2;
}
.pkg-sum-dtls .pkg-sum-dtls hr {
    margin: 15px 0;
}
.pkg-sum-dtls .pkg-sum-item:not(:last-child) {
    margin-bottom: 15px;
}
.pkg-sum-dtls .pkg-sum-title {
    font-size: 14px;
    line-height: 1.2;
}
.pkg-sum-dtls .pkg-sum-tx, .pkg-sum-dtls .pkg-font-item {
    font-size: 16px;
    color: #4ca6fa;
}
.pkg-sum-right .pkg-dtls-items {
    padding-top: 30px;
}
.pkg-sum-right .pkg-dtls-item .pkg-dsgn-vw {
    width: 100%;
    border: 1px solid #cccccc;
    padding: 15px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pkg-sum-right .pkg-dsgn-vw .pkg-img {
    padding: 5px 0;
    text-align: center;
}
.pkg-sum-right .pkg-dtls-item .pkg-clr-item span, .web-package-summary .pkg-clr-item span {
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    border: 1px solid #cccccc;
    border-radius: 3px;
}
.pkg-sum-right .pkg-dtls-item .pkg-sum-item {
    width: 100%;
    padding: 25px 15px;
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: left;
    margin-bottom: 0;
}
.pkg-sum-right .pkg-dtls-item:nth-child(even) .pkg-sum-item, .pkg-sum-right .pkg-dtls-item:nth-child(odd) .pkg-sum-item {
    background: #edf5f7;
}
.web-package-summary {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 15px;
}
.web-package-summary .web-pkg-sum-title {
    margin-bottom: 60px;
}
.web-package-summary .web-pkg-sum-dtls {
    padding: 15px 15px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 3px;
}
.web-package-summary .web-pkg-sum-img {
    margin-bottom: 30px;
}
.web-package-summary .web-pkg-sum-img img {
    -webkit-box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.25);
}
.web-package-summary .web-pkg-sum-dtls .pkg-sum-dtls {
    border: 0;
    padding: 30px 0 0 0;
    margin: 0;
}
.web-package-summary .pkg-sum-dtls hr {
    margin: 15px 0;
}
.web-active-step.cur-step-1 .web-pkg-sum-img {
    display: none;
}
.web-package-summary .pkg-ftrs-dtls, .web-package-summary .pkg-ftrs-dtls .pkg-sum-item {
    display: none;
}
.web-package-summary .web-pkg-sum-desc {
    display: none;
}
.cur-step-1 .web-package-summary .web-pkg-sum-desc {
    display: block;
}
div#pkg-name-field label {
    pointer-events: none;
}
.pkg-stp-radio label {
    padding-left: 40px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}
.pkg-stp-radio label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.pkg-stp-radio label .checkmark {
    position: absolute;
    left: 0;
    top: auto;
    height: 30px;
    width: 30px;
    background-color: #ccc;
    border-radius: 3px;
}
.pkg-stp-radio label:hover input ~ .checkmark {
    background-color: #ccc;
}
.pkg-stp-radio label input:checked ~ .checkmark {
    background-color: #2196F3;
}
.pkg-stp-radio label input:checked ~ .checkmark:after {
    display: block;
}
.pkg-stp-radio label .checkmark:after {
    content: "";
    position: absolute;
    left: 11px;
    top: 6px;
    width: 8px;
    height: 14px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
aside.wizard-buttons {
    padding: 0 15px;
}
.cur-step-12 aside.wizard-buttons {
    justify-content: center;
}
.cur-step-12 button.wizard-btn.btn.finish {
    color: #fff;
    background: #4364f7;
    border: 1px solid #4364f7;
}
.cur-step-1 button.wizard-btn.btn.prev {
    display: none;
}
button.wizard-btn.btn.prev {
    background-color: transparent;
    position: absolute;
    top: 10px;
    right: 15px;
    opacity: 1 !important;
    padding: 0;
    margin: 0;
    font-size: 14px;
}
button.wizard-btn.btn.prev:before {
    content: "\f060";
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    font-size: 12px;
    margin-right: 10px;
    padding: 6px 7px;
    border: 1px solid #000000;
    border-radius: 50%;
    background: #ffffff;
    color: #000000;
}
button.wizard-btn.btn.prev:hover {
    background: transparent;
}
.cur-step-12 button.wizard-btn.btn.next {
    display: none;
}
button.wizard-btn.btn.next, button.wizard-btn.btn.finish {
    color: #4364f7;
    opacity: 1 !important;
    background: #ffffff;
    border: 1px solid #4364f7;
    margin: 0;
    padding: 8px 30px;
    font-size: 18px;
    min-width: 150px;
}
button.wizard-btn.btn.next:hover, button.wizard-btn.btn.finish:hover {
    background: #4364f7;
    color: #ffffff;
}

/* Media Queries */
@media only screen and (min-width:480px) {

    /* Website packages */
    .pkg-step-body .desk-image-wrap {
        max-width: 500px;
    }
    .pkg-step-body .desk-image-wrap .desk-monitor-screen-image {
        height: 175px;
    }
}

@media only screen and (min-width:641px) {

    /* Web Packages */
    .website-package article.post-package:not(:nth-child(3n+1)) {
        margin-left: 0;
    }
    .website-package article.post-package:not(:nth-child(2n+1)) {
        margin-left: 2%;
    }
    .website-package article.post-package, .taxonomy-archive article.tax-post-package {
        width: 49%;
    }
    .single-package-post .package-details-col {
        width: 49%;
    }
    .single-package-post .package-details-col:not(:nth-child(4n+1)) {
        margin-left: 0;
    }
    .single-package-post .package-details-col:not(:nth-child(2n+1)) {
        margin-left: 2%;
    }
    .pkg-sum-right .pkg-dtls-item .pkg-sum-item {
        width: calc(100% - 250px);
    }
    .pkg-sum-right .pkg-dtls-item .pkg-dsgn-vw {
        width: 250px;
    }
    .pkg-sum-right .pkg-dtls-item:nth-child(even) .pkg-sum-item {
        background: #edf5f7;
    }
    .pkg-sum-right .pkg-dtls-item:nth-child(odd) .pkg-sum-item {
        background: #ffffff;
    }
}

@media only screen and (min-width:769px) {

    /* Website Packages */
    .pkg-step-header .pkg-header-wrap {
        justify-content: space-between;
        flex-direction: inherit;
    }
    .pkg-step-header .pkg-header-wrap > div {
        width: auto;
        text-align: left;
        margin: 0;
    }
    .pkg-step-body .pkg-design-items {
        top: -80px;
        margin-bottom: -80px;
    }
    .pkg-step-body .desk-image-wrap {
        max-width: 800px;
    }
    .pkg-step-body .desk-image-wrap .desk-monitor-screen-image {
        height: 340px;
    }
}

@media only screen and (min-width:991px) {

    /* Web Packages */
    .package-filter-section {
        width: 50%;
    }
    .website-package article.post-package:not(:nth-child(2n+1)) {
        margin-left: 0;
    }
    .website-package article.post-package:not(:nth-child(3n+1)) {
        margin-left: 2%;
    }
    .website-package article.post-package, .taxonomy-archive article.tax-post-package {
        width: 32%;
    }
    .single-package-post .package-details-col {
        width: 23.5%;
        margin-bottom: 0;
    }
    .single-package-post .package-details-col:not(:nth-child(2n+1)) {
        margin-left: 0;
    }
    .single-package-post .package-details-col:not(:nth-child(4n+1)) {
        margin-left: 2%;
    }
    .pkg-step-body .pkg-summary {
        flex-direction: inherit;
    }
}

@media only screen and (min-width:1024px) {

    /* Web Packages */
    .pkg-step-header .pkg-header-wrap {
        width: calc(100% - 315px);
    }
    .pkg-step-body {
        width: calc(100% - 315px);
        padding: 0 15px;
    }
    .web-package-summary {
        position: absolute;
        top: 30px;
        left: 15px;
        width: 100%;
        max-width: 300px;
        padding: 0;
    }
    .pkg-step-header {
        padding: 30px 15px;
    }
    .pkg-step-header .view-all-package {
        font-size: 14px;
    }
    .pkg-step-header .view-pkg {
        font-size: 12px;
    }
    .pkg-step-body .desk-image-wrap {
        max-width: 1000px;
    }
    .pkg-step-body .desk-image-wrap .desk-monitor-screen-image {
        height: 420px;
    }
    button.wizard-btn.btn.prev {
        top: 32px;
        right: 15px;
        font-size: 16px;
    }
    button.wizard-btn.btn.prev:before {
        font-size: 14px;
        padding: 10px 11px;
    }
}

@media only screen and (min-width:1201px) {

    /* Web Packages */
    .pkg-step-header .pkg-header-wrap {
        width: calc(100% - 430px);
    }
    .pkg-step-body {
        width: calc(100% - 430px);
        padding: 0 30px;
    }
    .web-package-summary {
        left: 30px;
        width: 100%;
        max-width: 400px;
    }
    .pkg-step-header {
        padding: 30px 30px;
    }
    .pkg-step-header .view-all-package {
        font-size: 16px;
    }
    .pkg-step-header .view-pkg {
        font-size: 14px;
    }
    aside.wizard-buttons {
        padding: 0 30px;
    }
    button.wizard-btn.btn.prev {
        right: 30px;
    }
}

@media only screen and (min-width:1367px) {

    /* Web Packages */
    .website-package {
        padding: 60px 30px;
    }
    .package-filter-section {
        padding: 60px 30px;
    }
    .pkg-step-header .pkg-header-wrap {
        width: calc(100% - 560px);
    }
    .pkg-step-body {
        width: calc(100% - 560px);
        padding: 0 60px;
    }
    .web-package-summary {
        left: 60px;
        width: 100%;
        max-width: 500px;
    }
    .pkg-step-header {
        padding: 30px 60px;
    }
    .pkg-step-header .view-all-package {
        font-size: 18px;
    }
    aside.wizard-buttons {
        padding: 0 60px;
    }
    button.wizard-btn.btn.prev {
        right: 60px;
        font-size: 18px;
    }
}

@media only screen and (min-width:1681px) {

    /* Web Packages */
    .website-package {
        padding: 60px 60px;
    }
    .package-filter-section {
        padding: 60px 60px;
    }
}