.ft-toggles {
    margin-bottom: 12px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-image: url('/images/BG-Toggles_2x.jpg');

    .toggle {
        position: relative;
        height: 140px;
        text-align: center;
        color: $pr-color-white;
        cursor: pointer;
        padding-left: 0;
        padding-right: 0;

        header {
            @include pr-label;
            font-size: $pr-size-small;
            font-weight: $pr-weight-medium;
            height: 36px;
            line-height: 36px;
            text-transform: uppercase;
            text-align: left;
            padding-left: 13px;
            margin-bottom: 15px;
        }

        .title {
            @include pr-label;
            font-size: $pr-size-large;
            font-weight: $pr-weight-light;
        }

        .subtitle {
            @include pr-text;
            font-weight: $pr-weight-light;

            span:first-child {
                display: block;
            }

            span:last-child {
                line-height: 14px;
                display: none;
            }
        }

        .screen {
            mix-blend-mode: screen;
            width: 100%;
            height: 100%;
            position: absolute;
        }

        &.film-lifecycle .screen {
            background-color: #404040;
        }

        &.advances-expenses .screen {
            background-color: #faa635;
        }

        &.actuals-contracted-revenue .screen {
            background-color: #428DE0;
        }

        &.projected-revenue .screen {
            background-color: #6F9927;
        }

        &.active {
            header {
                position: relative;

                &:after {
                    position: absolute;
                    content: '';
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    box-shadow: 0 3px 2px 0 rgba(0, 0, 0, .3);
                }
            }

            &:after {
                content: '';
                position: absolute;
                bottom: -12px;
                left: 0;
                width: 100%;
                height: 12px;
                box-shadow: 0 3px 2px 0 rgba(0, 0, 0, .3) inset;
            }

            &.film-lifecycle {
                header {
                    background-color: #404040;
                }

                &:after {
                    background-color: #404040;
                }
            }

            &.advances-expenses {
                header {
                    background-color: #faa635;
                }

                &:after {
                    background-color: #faa635;
                }
            }

            &.actuals-contracted-revenue {
                header {
                    background-color: #428DE0;
                }

                &:after {
                    background-color: #428DE0;
                }
            }

            &.projected-revenue {
                header {
                    background-color: #6F9927;
                }

                &:after {
                    background-color: #6F9927;
                }
            }
        }
    }
}

.clear {
    clear: both;
}

@media (min-width: 768px) {
    body:not(.mobile) {
        .ft-toggles {
            .toggle {
                &.film-lifecycle {
                    &:hover {
                        header {
                            background-color: rgba(64, 64, 64, 0.75);
                        }

                        &:after {
                            background-color: rgba(64, 64, 64, 0.85);
                        }
                    }

                    .screen:hover {
                        background-color: rgba(64, 64, 64, 0.85);
                    }
                }

                &.advances-expenses {
                    &:hover {
                        header {
                            background-color: rgba(250, 166, 53, 0.75);
                        }

                        &:after {
                            background-color: rgba(250, 166, 53, 0.85);
                        }
                    }

                    .screen:hover {
                        background-color: rgba(250, 166, 53, .85);
                    }
                }

                &.actuals-contracted-revenue {
                    &:hover {
                        header {
                            background-color: rgba(66, 141, 224, 0.75);
                        }

                        &:after {
                            background-color: rgba(66, 141, 224, 0.85);
                        }
                    }
                    
                    .screen:hover {
                        background-color: rgba(66, 141, 224, 0.85);
                    }
                }

                &.projected-revenue {
                    &:hover {
                        header {
                            background-color: rgba(111, 153, 39, 0.75);
                        }

                        &:after {
                            background-color: rgba(111, 153, 39, 0.85);
                        }
                    }

                    .screen:hover {
                        background-color: rgba(111,153,39,.85);
                    }
                }
            }
        }
    }

    .ft-toggles {
        .toggle {
            header {
                font-size: 1.2rem;
                padding-left: 10px;
            }
        }
    }
}

@media (max-width: 767px) {
    .ft-toggles {
        .toggle {
            height: 80px;

            header {
                display: none;
            }

            .title {
                font-size: $pr-size-medium;
                font-weight: $pr-weight-heavy;
                line-height: 36px;
            }

            .subtitle {
                span:first-child {
                    display: none;
                }

                span:last-child {
                    display: block;
                    padding-left: 5px;
                    padding-right: 5px;
                }
            }

            &.active {
                box-shadow: 0 4px 2px 0 rgba(0, 0, 0, .3);
            }

            &:after {
                display: none;
            }

            &.film-lifecycle {
                .screen {
                    background-color: rgba(64, 64, 64, 0.75);
                }

                .title {
                    font-size: 3.4rem;
                    margin-top: 12px;
                    display: block;
                }

                br {
                    display: none;
                }
            }
        }
    }
}

@media (min-width: 980px) {
  body:not(.mobile) {
    .ft-toggles {
      .toggle {
        header {
          font-size: 1.4rem;
          padding-left: 13px;
        }
      }
    }
  }
}