// Featured Areas & Featured Pages & Related Pages
//==================================================
.featureapage, .featureditem li, .relatedpages li{
    & when (@widget-FA-FP-RP){
        margin-bottom : 30px;


        a{ }

        .page-teaser-image{
            overflow      : hidden;
            margin-bottom : 0.5em;

            img{
            }
        }

        .page-title{ }

        span, p{ }

        &:hover{

            a{ }

            .page-teaser-image{
                img{ }
            }

            .page-title{ }

            span, p{ }
        }
    }
}

// Featured Areas
//==================================================
.featureditem when (@widget-FA) and (@widget-FA-FP-RP){

    li{ }

    a{ }

    .page-teaser-image{
        img{ }
    }

    .page-title{ }

    span{ }

    li:hover{

        a{ }

        .page-teaser-image{
            img{ }
        }

        .page-title{ }

        span{ }
    }
}

.f_a {
    padding: 3em 0;
    .featureditem{
        padding-left : 65px;
        position     : relative;
        margin: 35px 0;
        li{
            width  : 100%;
            margin : 0 0 3px 0;
            .page-title {
                font-size: 1em;
                font-weight: bold;
                margin: 0;
            }

        }
        &::before{
            position    : absolute;
            top         : 0;
            left        : 0;
            width       : 50px;
            font-size   : 41px;
            font-weight : bold;
            line-height : 54px;
            text-align: center;
            background  : #c9c9c9;
            color       : #fff;
            .border-radius(0.2em);
        }
    }
    .A::before {
        content:'A';
    }
    .B::before {
        content:'B';
    }
    .C::before {
        content:'C';
    }
    .D::before {
        content:'D';
    }
    .E::before {
         content:'E';
     }
    .F::before {
        content:'F';
    }
    .G::before {
        content:'G';
    }
    .H::before {
        content:'H';
    }
    .I::before {
        content:'I';
    }
    .J::before {
        content:'J';
    }
    .K::before {
        content:'K';
    }
    .L::before {
        content:'L';
    }
    .M::before {
        content:'M';
    }
    .N::before {
        content:'N';
    }
    .O::before {
        content:'O';
    }
    .P::before {
        content:'P';
    }
    .Q::before {
        content:'Q';
    }
    .R::before {
        content:'R';
    }
    .S::before {
        content:'S';
    }
    .T::before {
        content:'T';
    }
    .U::before {
        content:'U';
    }
    .V::before {
        content:'V';
    }
    .W::before {
        content:'W';
    }
    .X::before {
        content:'X';
    }
    .Y::before {
        content:'Y';
    }
    .Z::before {
        content:'Z';
    }

}

.filters {
    .featureditem{

        li{
            width: 100%;
            margin:0 0 4px;
            font-size: 14px;
            .grid-elements(4;2%;false);
            .page-title {
               font-style: italic;
                color: #000;
            }

        }

    }

}
.all-categories {
        li{
           font-size: 14px;
            text-align: center;
            .grid-elements(6;3%;false;5;3;);
            .page-teaser-image{
                background: @brand-primary;
                .border-radius(50%);
                img {
                    padding: 10px;
                    margin-top: 5px;
                    background: #fff;
                    .border-radius(50%);
                }

            }
            .page-title {
                font-weight: bold;
                color: #000;
            }
            &:hover {
                .page-teaser-image{
                    background : @brand-primary-second;
                }
                .page-title {
                    color: @brand-primary-second;
                }
            }

        }
}

// Featured Pages
//==================================================
.featureapage when (@widget-FP) and (@widget-FA-FP-RP){
    float : left;

    a{ }

    .page-teaser-image{
        img{ }
    }

    .page-title{ }

    p{ }

    &:hover{
        a{ }

        .page-teaser-image{
            img{ }
        }

        .page-title{ }

        p{ }
    }
}

// Related Pages
//==================================================
.relatedpages when (@widget-RP) and (@widget-FA-FP-RP){
    li{ }

    a{ }

    .page-teaser-image{
        img{ }
    }

    .page-title{ }

    span{ }

    li:hover{
        a{ }

        .page-teaser-image{
            img{ }
        }

        .page-title{ }

        span{ }
    }
}