//
// DEMAND GENERATION
// --------------------------


#agave_demand_gen {
    
    .overview-section,
    .dg-campaign-results {
        background-color: $bg-gray;
    }
    
    .overview-section {
        padding: 60px 0;
        
        @include breakpoint(small down) {
            padding: 40px 0;
        }
        
        h3 {
            text-align: center;
            margin-bottom: 25px;
        }
        
        .page-description {
            p {
                font-size: 20px;
                line-height: 32px;
            }
        }
    }
    
    .dg-campaign-results {
        padding-bottom: 40px;
        border-bottom: 3px solid #fff;
        
        section.row {
            display: flex;
            min-height: 160px;
            background-color: #fff;
            margin-bottom: 40px !important;
            position:relative;
            
            width: 100%;
            max-width: 850px;
            margin-left: auto;
            margin-right: auto;
            
            border: 1px solid $agave-light-blue;
            
            >div {
                padding: 20px 0 0 20px;
                width: 100%;
            }
            
            h3 {
                font-size: 28px;
                color: $agave-light-blue;
            }
            
            a {
               text-decoration: none; 
            }
            
            h5 {
                font-weight: 700;
                color: #535353;
                margin: 0 0 5px 0;
            }
            
            h4 {
                float: left;
                margin: 30px 0;
                font-size: 20px;
                color: $agave-dark;
                text-transform: none;
            }

            .arrow_box {
                position: relative;
                border-radius: 0;
                box-shadow: 0 3px #e9e9e9;
                float: right;
                padding: 0 10px 0 0;
                margin: 0 0 0 25px;
                height:36px;
                line-height:36px;
                color:#fff;
                font-size: 18px;
                font-weight: 600;
                
                &:before {
                    right: 100%;
                    top: calc(50% + 3px);
                    border: solid transparent;
                    content: " ";
                    height: 0;
                    width: 0;
                    position: absolute;
                    pointer-events: none;
                    border-right-color: #e9e9e9;
                    border-width: 19px;
                    margin-top: -20px;    
                }
                
                &:after {
                    right: 100%;
                    top: 50%;
                    border: solid transparent;
                    content: " ";
                    height: 0;
                    width: 0;
                    position: absolute;
                    pointer-events: none;
                    border-right-color: #88b7d5;
                    border-width: 18px;
                    margin-top: -18px;
                }
                
                &.featured {
                    background: #75bb3a;
                    
                    &:after {
                        border-right-color: #75bb3a;
                    }
                }
                
                &.new {
                    background: #004071;
                    
                    &:after {
                        border-right-color: #004071;
                    }
                }
                
                &.full {
                    background: #e8573a;
                    
                    &:after {
                        border-right-color: #e8573a;
                    }
                }
            }
            
            .content {
                padding:0 15px 0 0;
            }

            .more {
                display:none;
            }
            
            &.showmore {
                .less {
                    display:none;
                }
                .more {
                    display:block;
                }
            }
            
            .button {
                margin:20px 0;
                float:left;
                min-width: 128px;
                font-weight: 700;
                font-size: 18px;
                background: $agave-light-blue;
            }
            
            .avg_stars {
                float: left;
                margin: 30px 20px;
            }
            
            .icon {
                float: right;
                width: 110px;
                height: 110px;
                position: relative;
                
                &:before {
                    content: '';
                    float: right;
                    width: 0;
                    height: 0;
                    border-style: solid;
                    border-width: 0 0 110px 110px;
                    border-color: transparent transparent #74c1d9 transparent;
                    position: absolute;
                }
                
                img {
                    position: absolute;
                    z-index: 5;
                    right: 10px;
                    bottom: 10px;
                }
            }
        } // .row
        
        .avg_stars {
            position: relative;
            width:139px;
            height:25px;
            display: inline-block;
            background-color: #d0d0d0;
            margin: 0 10px 0 0;
            vertical-align: middle;
            
            &.star-1 div {
                width: 20%;
            }
            &.star-2 div {
                width: 40%;
            }
            &.star-3 div {
                width: 60%;
            }
            &.star-4 div {
                width: 80%;
            }
            &.star-5 div {
                width: 100%;
            }
            
            div {
                background:#0094ba;
                position:absolute;
                height: 100%;
                left:0;
                top:0;
            }
            
            img {
                position:absolute;
                width:100%;
                height: auto;
                left:0;
                top:0;
            }
            
            button.star {
                width: 20%;
                height: 100%;
                border: none;
                display: block;
                float: left;
                position: relative;
            }
        } // .avg_stars
        
        // If user is not an Agave graduate - gray out some of the color and disable links
        // class is added depending on user's role
        &.not-graduate {
            div > a {
                cursor: not-allowed;
                
                > h3 {
                    color: #bbb;
                }
            }
            a.button {
                cursor: not-allowed;
                background-color: #bbb;
            }
        }
        
    } // .dg-campaign-results
    
    // Modal for when user clicks on a link but they're not an Agave graduate
    
    .graduate-modal {
        position: fixed;
        border: 5px solid $agave-light-blue;
        background-color: #fff;
        padding: 35px 30px;
        top: 50%;
        left: 200%;
        width: 100%;
        max-width: 400px;
        margin-left: 20px;
        margin-right: 20px;
        height: auto;
        display: none;
        transform: translate(-50%, -50%);
    }
    
    .graduate-modal.open-modal {
        left: 50%;
        display: block;
    }
    
    .graduate-modal .close-btn {
        position: absolute;
        top: 5px;
        right: 5px;
        font-size: 20px;
        cursor: pointer;
    }
    
    .graduate-modal .close-btn i {
        color: $agave-dark;
    }
    
    .graduate-modal p {
        font-size: 20px;
        text-align: center;
    }
}