html {
    height: 100%;
}

body {
    height: 100%;
    padding-top: 55px;
}

#brand {
    display: inline-block;
}

#backBtn {
    opacity: 0;
    display: none;
}

#brand, #backBtn {
    transition: opacity 0.3s display 0.3s;
    transition-timing-function: cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

#app {
    height: 100%;
    padding: 0;
    overflow: hidden;
    position: relative;
}

#product-list {
    padding: 0;
    margin: 0;
}

@media(max-width: 767px) {
    body {
        padding-top: 60px;
    }
    
    .view {
        position: absolute;
        z-index: 500;
        will-change: transform;
        transition: -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
        transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
    }
    
    .view:nth-of-type(2) {
        left: 100vw;
        z-index: 400;
    }
    
    .view:nth-of-type(3) {
        left: 200vw;
        z-index: 300;
    }
    
    .view:nth-of-type(4) {
        left: 300vw;
        z-index: 200;
    }
    
    #app[data-step="1"] .view {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    
    #app[data-step="2"] .view, #app[data-step="3"] .view {
        -webkit-transform: translateX(-100vw);
        transform: translateX(-100vw);
    }
    
    #app[data-step="4"] .view {
        -webkit-transform: translateX(-200vw);
        transform: translateX(-200vw);
    }
    
    .navbar.showBackBtn #brand {
        opacity: 0;
        display: none;
    }
    
    .navbar.showBackBtn #backBtn {
        opacity: 1;
        display: inline-block;
    }
}

@media(min-width: 768px) and (max-width: 1199px) {
    .view {
        will-change: transform;
        transition: -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
        transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
    }
    
    .view:nth-of-type(3) {
        position: absolute;
        left: 100%;
    }
    
    #app[data-step="4"] .view:nth-of-type(1),
    #app[data-step="4"] .view:nth-of-type(3) {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    
    #app[data-step="4"] .view:nth-of-type(2) {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}

.fsccontrol {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50px;
}

.fsccontrol a {
    position: absolute;
    margin-top: 50%;
    padding: 0;
    color: #f7f7f7;
}

#fabric-selector-carousel-left a {
    right: 0;
}

#fabric-selector-carousel-right {
    right: 0;
}

#fabric-selector-carousel-right a {
    left: 0;
}

#order-item-summary p {
    margin: 0;
}

#order-item-summary {
    margin-bottom: 10px;
}

.radio-wrapper {
    padding: 7px 5px 3px;
    line-height: 1;
    min-width: 50px;
    text-align: center;
    border: coral solid 3px;
    margin-right: 10px;
}

.radio-wrapper.checked {
    background-color: coral;
    color: white;
}