//promo-group
.groupPromo{

    .listWebpart{
        margin:0;
        padding:0;
    }

        ul{
            background: transparent;
            @include flexbox();
            @include flex-direction(row);
            @include flex-wrap(wrap);
            margin:10px 0 30px -6px;
            width:auto;
            border:0;

            @media (max-width: 600px) {
                margin:10px 0 30px;
            }

            li {
                background:$group-promo-background-color;
                border: 0;
                width: calc(100% * (1/4) - 5px) !important;
                margin:5px 0 0 5px;
                border:0;

     
            .col-md-8 & {
                width: calc(100% * (1/3) - 6px) !important;
            }
            .col-md-6 & {
               width: calc(100% * (1/2) - 5px) !important;
            }
            .col-md-4 & {
               width: calc(100% * (1/2) - 5px) !important;
            }

                @media (max-width: 1200px) {


                    width: calc(100% * (1/2) - 5px) !important;

                      .col-md-8 &, .col-md-6 & {
                width: calc(100% * (1/2) - 5px) !important;
            }


         .col-md-4 & {
                width: calc(100%) !important;
            }

                }

            @media (max-width:990px)and(min-width:601px){

                 .col-md-4 & {
                width: calc(100% * (1/2) - 5px) !important;
            }

            }



                @media (max-width: 600px) {
                    width: calc(100%) !important;
                    margin:5px 0 0;

             .col-md-8 &, .col-md-6 &,  .col-md-4 & {
                width: calc(100%) !important;
            }

                }

                a{
                    background:$group-promo-background-color;
                    padding:30px;
                    text-decoration:none !important;
                    height:100%;
                    margin:0;
                    display: block;
                    position: relative;
                    width: auto;

                    
                    img {
                        width: 100%;
                        max-width: 100%;
                        margin-bottom: 15px;
                    }

                    &:hover,
                    &:active {
                        background:darken($group-promo-background-color,5%);
                    }

                    &:active,
                    &:focus{
                        h3,
                        h3:after,
                        p{
                            color:$base-font-color !important;
                        }
                    }

                    @media (max-width: 767px) {
                        min-height:0;
                        padding:20px;
                    }

                    @media (max-width: 600px) {
                        min-height:0;
                        padding:20px 15px;
                    }
                    
                    h3 {
                        margin: 0;
                        font-weight: $header-font-weight;
                        font-size: 24px;
                        color: $group-promo-header-color;
                        padding-right:30px;
                        line-height:28px;
                        position:relative;

                        @media (max-width: 767px) {
                            font-size: 19px;
                            line-height:24px;
                        }

                            &:after {
                                content: '\f105';
                                font-family: FontAwesome;
                                position: absolute;
                                top: 0px;
                                right: 0px;
                                color:$group-promo-arrow-color;
                                @media (max-width: 600px) {
                                    top: 50%;
                                    right: 0;
                                    margin-top:-10px;
                                    font-size:16px;
                                }
                            }
                    }

                    p{
                        font-size:18px;
                        font-weight:$base-font-weight;
                        margin-top: 10px;
                        margin-bottom:0;
                        color:$group-promo-description-color;

                        @media (max-width: 767px){
                            font-size: 14px;
                        }

                        @media (max-width: 600px) {
                            padding-right:30px;
                            margin-top: 5px;
                        }
                    }
                }

                   &.external a h3:after {
                        content:'\f08e';
                    }

            //External and PDF link
            a[rel="external"],
            a.external,
            a[rel="pdf"],
            a.pdf{
                &:after{
                    display:none;
                }

                h3{
                    &:after{
                        color:$group-promo-arrow-color;
                    }
                }
            }

            //External link
            a[rel="external"],
            a.external{
                h3{
                    &:after{
                        content: "\f08e";
                    }
                }
            }

            //PDF link
            a[rel="pdf"],
            a.pdf{
                h3{
                    &:after{
                        content: "\f1c1";
                    }
                }
            }
            }
        }

        &.three ul li {
            width: 100% !important;
            @media (min-width: 990px){
                width: calc(100% * (1/3) - 5px) !important;
            }
        }
    }


.groupPromo {

    &.blockLinksGreen .listWebpart {
        @include groupPromo(#97BD0E, #fff, #fff,#fff);
    }
    &.blockLinksPurple .listWebpart {
        @include groupPromo(#72286E, #fff,#fff,#fff);
    }
    &.blockLinksPink .listWebpart  {
        @include groupPromo(#B10042, #fff,#fff,#fff);
    }
    &.midnightBlue .listWebpart {
        @include groupPromo(#2c3e50, #fff, #fff,#fff);
    }
    &.carrot .listWebpart {
        @include groupPromo(#e67e22, #fff,#fff,#fff);
    }
    &.white .listWebpart {
        @include groupPromo(#fff, #333, #333,#333);
    }

}

//no flexbox fallback - group promo
.no-flexbox .groupPromo ul {
    width:100%;
    display:inline-block;

    @media (max-width: 600px){
        margin:0;
    }

    li{
        display:inline-block;

        a{
            @media (min-width: 600px){
                min-height:170px;
            }
            @media (min-width: 990px){
                min-height:170px;
            }
            @media (min-width: 990px){
                min-height:150px;
            }
            @media (min-width: 1200px){
                min-height:240px;
            }
            @media (min-width: 1400px){
                min-height:210px;
            } 
        }
    }

    li:nth-child(4n+5){
        @media (min-width: 990px){
            clear:both;
        }
    }
    li:nth-child(2n+3){
        @media (min-width: 600px) and (max-width: 990px){
            clear:both;
        }
    }
}

//group promo
.ie8 .groupPromo ul li{
    width:100%;

    a{
        width:100%;
    }
}

//group promo no flex
.no-flexbox .groupPromo ul li{
    width:100% !important;
    a{
        width:100% !important;
        min-height:0 !important;
    }
}