//
// AGAVE STEPS ROLLOUT
// --------------------------


.steps-section {
    .step-col {
        @include breakpoint(large){
            display: flex;
            flex-wrap: nowrap;
        }
    }
    
    .steps {
        position: relative;
        background-size: cover;
        padding: 50px 30px;
        transition: all 0.5s ease;
        border-bottom: 10px solid $agave-dark;
        
        @include breakpoint(large) {
            width: calc(25% - 10px);
            padding: 220px 40px;
            border-right: 10px solid $agave-dark;
            border-bottom: none;
            height: 650px;
            flex-grow: 1;
            
            &:hover{
                cursor: pointer;
            }
        }
        
        &:last-child {
            border: none;
        }
        
        .copy,
        .agBtn {
            @include breakpoint(large){
                display: none;
                transition: all 0.5s ease;
            }
        }
        
        .title {
            text-align: left;
            font-weight: bold;
            font-size: 30px;
            
            @include breakpoint(large) {
                text-align: center;
            }
        }
        
        .icon-wrapper {
            margin: 30px 0px;
            max-height: 70px;
            text-align: center;
            
            i {
                color: $bg-gray;
                font-size: 80px;
            }
            
            @include breakpoint(large) {
                display: block;
                margin: 30px auto;
                transition: all 0.5s ease;
            }
        }
        
        h3,
        p {
            color: #fff;
        }
        
        .expand-arrows {
            position: absolute;
            right: -30px;
            height: 260px;
            z-index: 3;
            
            &.a4{
                display: none;
            }
        } // .arrows
        
    } // .steps
    
    .steps.collapsed {
        transition: all 0.5s ease;
        
        @include breakpoint(large){
            width: 20%;
        }
        
        
        .title {
            @include breakpoint(large){
                text-align: center;
            }
        }
        
        .copy,
        .agBtn {
            @include breakpoint(large){
                display: none;
                transition: all 0.5s ease;
            }
        }
    } // .steps-collapsed
    
    .steps.expanded {
        transition: all 0.5s ease;

        @include breakpoint(large) {
            width: 40%;
            
            .title,
            .copy {
                text-align: left;
            }
            
            .icon-wrapper {
                text-align: left;
                display: block;
                margin: 10px 0px;
                transition: all 0.5s ease;
            }
            
            .copy,
            .agBtn {
                display: table;
                transition: all 0.5s ease;
            }
        }
    } // .steps-expanded
    
} // .steps-section