@media all and (max-width: 1333px) {

	.config-steps {
		width: 420px;
	}

}

@media all and (max-width: 1100px) {

    .config-pack-video-icon {
        display: none;
    }

    .config-step-content .config-picture-upload,
    .config-step-content .browse-catalog {
        display: none;
    }

    .config-picture-background {
        margin: 0 auto;
        padding: 0;
        border: 0;
    }

    .config-step-header {
        display: none;
    }

    .mobile-step-headers {
        display: initial;
    }

    .config-step-header.config-mobile-step-header.current {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }

    .config-step-header > .svg-icon {
        width: 1.5rem;
        height: 1.5rem;
        margin: 0;
    }

    .config-step-header > strong {
        font-size: 1.25rem;
        margin: 0 .5rem 0 .5rem;
    }

    .step-header-arrow {
        border-radius: initial;
        position: relative;
        top: 1px;
    }

    .step-header-arrow.next {
        margin-left: 0;
    }

    .step-header-arrow.prev {

    }

    .step-header-arrow .svg-icon {
        width: 20px;
        height: 20px;
    }

    span.user-photo-hint.is-mobile {
        display: block;
    }

    .mobile-picture-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: .5rem 0;
    }

    .mobile-picture-actions .config-picture-upload {
        margin-right: .5rem;
    }

    .mobile-picture-actions #userPicture + label {
        height: initial;
        line-height: initial;
        padding: .75rem .75rem;
        font-size: .9rem;
        font-weight: 300;
        width: initial;
        margin: 0;
    }

    .mobile-picture-actions .browse-catalog {
        height: initial;
        line-height: initial;
        padding: .75rem .75rem;
        font-size: .9rem;
        font-weight: 300;
        width: initial;
        margin: 0;
    }

    .config-step-btn::before {
        display: none;
    }

    .app {
        display: flex;
        flex-direction: column;
    }

    .canvas-step-hint {
        bottom: initial;
        top: 1rem;
    }

    .canvas-step-hint p {
        font-size: 12px;
        font-weight: normal;
    }

    .config.full-height {
        height: auto;
        min-height: auto;
        display: block;
        position: relative;
    }

    .config-canvas-wrapper {
        display: flex;
        height: calc(100vh - 135px);
        /*margin-top: 60px;*/
    }

    .config-steps {
        width: 100%;
        position: initial;
    }

    .config-steps-nav {
        display: none;
        position: relative;
        top: initial;
        left: initial;
        right: initial;
        width: 100%;
        border-radius: 0;
    }

    .config-steps-nav .inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0;
    }

    .config-step-nav-link {
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        height: initial;
        line-height: 1;
        padding: 1rem 0;
        border-right: 1px solid rgba(0,0,0,.1);
    }

    .config-step-nav-link:last-of-type {
        border-right: 0;
    }

    .config-step-nav-dot {
        display: none;
    }

    .config-step-dot-tooltip,
    .config-step-nav-link:hover .config-step-dot-tooltip,
    .config-step-nav-link:hover .config-step-dot-tooltip {
        display: none;
    }

    .config-step-nav-link .svg-icon {
        display: inline-block;
        width: 28px;
        height: 28px;
        fill: #999;
    }

    .config-step-nav-dot.dot-current + .svg-icon {
        fill: #fff;
    }

    .config-step-nav-dot.dot-complete + .svg-icon {
        fill: #008137;
    }

    .config-step {
        position: relative;
        transform: initial;
        top: initial;
        right: initial;
        left: initial;
        max-height: 0;
        overflow: hidden;
    }

    .config-step.opened {
        max-height: 2500px;
    }

    .config-step-content {
        padding: 2rem 1rem;
        height: initial;
        height: auto;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .config-step-content > div:first-of-type {
        order: 2;
    }

    .config-step-summary .config-step-content {
        padding-bottom: 1rem;
        padding-top: 8rem;
    }

    .config-step-actions {
        order: 1;
        position: initial;
        border: 0;
    }

    .config-step-actions.visible {
        margin: 0;
        padding: 0;
        border: 0;
        margin-bottom: 2rem;
    }

    .scrollable-overlay.enabled {
        display: initial;
        z-index: 20;
    }

}

@media all and (max-width: 1000px) {

    .config-start {
        width: initial;
        margin: 0 1rem;
    }

    .config-start-choise {
        flex: 0 0 49%;
        padding: 2rem 1rem;
    }

    .config-start-choise > strong {
        font-size: 1.5rem;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }

    .config-start-choise > p {
        font-size: 1rem;
    }

    .config-start-choise > span .svg-icon {
        width: 5rem;
        height: 5rem;
    }

}

@media all and (max-width: 700px) {

    .config-choises-trustpilot {
        display: none;
    }

    .app.config-main-page .main-header {
        padding: 2rem 1rem;
    }

    .config-start > h1 {
        font-size: 2rem;
        margin: 1.5rem 0;
    }

    .config-start {
        margin-bottom: 5rem;
    }

    .config-start-choises {
        flex-wrap: wrap;
    }

    .config-start-choise {
        flex: 0 0 100%;
        margin-bottom: 1rem;
        border-radius: 60px;
        padding: 2rem;
    }

    .config-start-choise > strong {
        margin: 0;
        padding: 0;
        border: 0;
        line-height: 1.2;
        font-weight: normal;
    }

    .config-start-choise > p,
    .config-start-choise > span {
        display: none;
    }

    .config-help-form {
        width: 100%;
        padding: 1rem;
    }

    .config-help-form .form-object {
        flex-wrap: wrap;
        margin-bottom: 1rem;
    }

    .config-help-form label {
        flex: 0 0 100%;
        margin: 0 0 .5rem;
    }

    .config-help-form .multiple {
        flex: initial;
        width: 100%;
    }

    .config-help-form .multiple .form-input {
        flex: 0 0 49%;
    }

    .config-help-form textarea.form-input {
        height: 200px;
    }

}

@media all and (max-width: 490px) {

    .config-help-form .multiple {
        flex-wrap: wrap;
    }

    .config-help-form .multiple .form-input {
        flex: 0 0 100%;
    }

    .config-help-form .multiple .form-input:first-of-type {
        margin-bottom: .5rem;
    }

}

@media all and (max-width: 680px) {

    .mobile-page-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 20;
    }

    .canvas-background,
    .canvas-overlay {
        transform: scale(0.6);
    }

}