// custom for leeds.gov.uk
.hero-lcc-wrapper {
    background-image: none;
    background-color: rgba(9, 59, 81, 1);
    background-repeat: no-repeat;
    background-position: center center;
    @include background-size(cover);
    z-index: -2;
    @media (min-width: 767px) {
        height: 75vh;
    }
    .hero-lcc {
        @include background-radial(rgba(9, 59, 81, 0.9), rgba(9, 59, 81, 0.5), rgba(9, 59, 81, 0.5));
        z-index: -1;
        height: 100%;
        @include flexbox();
        @include justify-content(center);
        @include align-items(center);
        @media (max-width: 767px) {
            padding: 80px 0;
            @include background-radial(rgba(9, 59, 81, 0.9), rgba(9, 59, 81, 0.5), rgba(9, 59, 81, 0.7));
        }
        .hero-lcc__content {
            max-width: 900px;
            width: 100%;
            padding: 15px;
            @media (max-width: 500px) {
                padding: 0px 15px;
            }
            .hero-lcc__intro {
                text-align: center;
                text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
                .hero-lcc__intro-header {
                    color: #fff;
                    margin: 0 0 7px;
                    font-size: 52px;
                    @media (max-width: 500px) {
                        font-size: 36px;
                        margin: 0 0 5px;
                    }
                    @media (max-width: 330px) {
                        font-size: 28px;
                    }
                    span {
                        display: block;
                        font-size: 24px;
                        font-weight: 400;
                        margin: 0 0 7px;
                        @media (max-width: 500px) {
                            font-size: 19px;
                            margin: 0 0 5px;
                        }
                    }
                }
                .hero-lcc__intro-secondary {
                    margin: 0 0 20px;
                    color: #fff;
                    font-size: 24px;
                    font-weight: 400;
                    @media (max-width: 500px) {
                        font-size: 19px;
                    }
                }
            }
            .hero-lcc__actions {
                background: rgba(38, 50, 56, 0.25);
                @include border-radius(4px);
                padding: 10px;
                .hero-lcc__search-wrapper {
                    margin: 0 0 10px;
                    @media (max-width: 767px) {
                        margin: 0 0 5px;
                    }
                    //bootstrap style
                    .hero-lcc__search {
                        position: relative;
                        &:before {
                            font-family: FontAwesome;
                            content: "\f002";
                            position: absolute;
                            left: 15px;
                            top: 50%;
                            margin-top: -17px;
                            font-size: 30px;
                            line-height: 1;
                            color: $dark-grey;
                            z-index: 4;
                            @media (max-width: 766px) {
                                display: none;
                            }
                        }
                        .hero-lcc__search-input {
                            height: 45px;
                            -webkit-border-radius: 4px 0 0 4px;
                            -moz-border-radius: 4px 0 0 4px;
                            -ms-border-radius: 4px 0 0 4px;
                            border-radius: 4px 0 0 4px;
                            font-size: 16px;
                            width: 100% !important;
                            border: 0 !important;
                            padding: 6px 12px !important;
                            @media (min-width: 767px) {
                                padding-left: 60px !important;
                                font-size: 20px !important;
                                height: 55px;
                            }
                            @media (max-width: 350px) {
                                font-size: 14px;
                            }
                            &:focus {
                                @include input-focus();
                            }
                        }
                        .btn {
                            height: 55px;
                            border: 0;
                            padding: 10px 25px;
                            background: $primary-button-background-color;
                            font-size: 21px;
                            margin: 0;
                            color: white;
                            &:hover {
                                background: $button-hover-color;
                                color: $white;
                            }
                            @media (max-width: 766px) {
                                width: 45px;
                                height: 45px;
                            }
                            &:after {
                                display: none;
                            }
                            i {
                                font-size: 26px;
                                @media (min-width: 767px) {
                                    display: none;
                                }
                            }
                            @media (max-width: 766px) {
                                padding: 5px 10px;
                                span {
                                    position: absolute;
                                    width: 1px;
                                    height: 1px;
                                    padding: 0;
                                    margin: -1px;
                                    overflow: hidden;
                                    clip: rect(0, 0, 0, 0);
                                    border: 0;
                                }
                            }
                        }
                    }
                }
                .hero-lcc__most-popular {
                    padding: 0;
                    @include flexbox();
                    @include flex-wrap(wrap);
                    margin: 0 0 0 -10px;
                    &.two {
                        .hero-lcc__most-popular-item {
                            width: 50% !important;
                            @media (max-width: 767px) {
                                width: 100% !important;
                            }
                        }
                    }
                    .hero-lcc__most-popular-item {
                        @include flexbox();
                        @include flex(1 1 auto);
                        @include align-items(stretch);
                        @include align-content(space-between);
                        width: 33.33% !important;
                        padding-left: 10px;
                        padding-bottom: 10px;
                        a {
                            width: 100%;
                            text-align: left;
                            margin: 0;
                            font-size: 16px;
                            padding: 12px 50px 12px 12px !important;
                            font-weight: 400;
                            background: $blue;
                            border: 0;
                            margin: 0;
                            line-height: 1.3;
                            @include flexbox();
                            @include justify-content(center);
                            @include flex-direction(column);
                            color: white;
                            box-shadow: 0px 3px 0px darken($secondary-button-background-color, 15%);
                            min-height: 45px;
                            @media (min-width: 767px) {
                                min-height: 55px;
                                padding: 15px 50px 15px 15px !important;
                            }
                            &:hover {
                                background: darken($secondary-button-background-color, 15%);
                                color: white;
                            }
                            &:focus,
                            &:active {
                                border: 0;
                                box-shadow: 0px 3px 0px $focus-color;
                                background: $focus-color;
                                color: $base-font-color;
                                &:before {
                                    background: $focus-color;
                                }
                            }
                            &:after {
                                display: block;
                                font-family: FontAwesome;
                                content: "\f105";
                                position: absolute;
                                right: 0px;
                                height: auto;
                                background: transparent;
                                padding: 0;
                                top: 50%;
                                font-size: 22px;
                                content: "\f105";
                                padding: 0;
                                text-align: center;
                                line-height: 0;
                                width: 36px;
                                font-size: 22px;
                                width: 55px;
                                @media (max-width: 767px) {
                                    width: 45px;
                                }
                            }
                            &:after {
                                z-index: 5;
                            }
                            &[rel=external]:after {
                                content:"\f08e";
                                margin-top: 3px;
                            }
                            @media (min-width: 767px) {
                                font-size: 19px;
                                padding: 17px 70px 17px 15px;
                            }
                        }
                    }
                }
                @media (max-width: 767px) {
                    padding: 5px 5px 0px;
                    .hero-lcc__most-popular {
                        margin: 0;
                        .hero-lcc__most-popular-item,
                        {
                            width: 100% !important;
                            padding-left: 0;
                            padding-bottom: 5px;
                        }
                    }
                }
            }
        }
    }
}

//no flexbox fallback
.no-flexbox .hero-lcc-wrapper {
    .hero-lcc {
        display: table;
        width: 100%;
        background: rgba(9, 59, 81, 0.7);
        .hero-lcc__content {
            margin: 0 auto;
            display: table-cell;
            vertical-align: middle;
            padding: 0 15em;
            @media (max-width: 1400px) {
                padding: 0 10em;
            }
            @media (max-width: 1200px) {
                padding: 0 5em;
            }
            @media (max-width: 990px) {
                padding: 0;
            }
            .hero-lcc__actions {
                .hero-lcc__most-popular {
                    width: 100%;
                    display: table;
                    .hero-lcc__most-popular-item {
                        display: table-cell;
                        @media (max-width: 767px) {
                            display: block;
                        }
                    }
                }
            }
        }
    }
}

//hero-lcc
.ie8 .hero-lcc-wrapper {
    .hero-lcc {
        .hero-lcc__content {
            padding: 80px 15em;
            .hero-lcc__actions {
                .hero-lcc__search-wrapper .hero-lcc__search {
                    .hero-lcc__search-input {
                        height: 55px;
                    }
                    .btn i {
                        display: none;
                    }
                }
            }
        }
    }
}

//lcc-hero no flex
.no-flexbox .hero-lcc-wrapper .hero-lcc .hero-lcc__content .hero-lcc__actions .hero-lcc__most-popular .hero-lcc__most-popular-item{
    width:auto !important;
}

.ie8 .hero-lcc-wrapper .hero-lcc .hero-lcc__content .hero-lcc__actions .hero-lcc__search-wrapper .hero-lcc__search .hero-lcc__search-input{
    line-height:55px;
    padding-left:60px !important;
}