﻿/*#region  Event list page styles
-------------------------------------  */

section.events.flex {
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-top: 2em;
}

    section.events.flex > .full {
        -ms-flex: 0 0 100%;
        -webkit-flex: 0 0 100%;
        flex: 0 0 100%;
    }

    section.events.flex:not(.wide):not(:first-of-type) {
        padding-top: 2em;
    }

    section.events.flex p.empty {
        -ms-flex: 0 0 100%;
        -webkit-flex: 0 0 100%;
        flex: 0 0 100%;
    }

    section.events.flex article {
        -ms-flex: 0 0 100%;
        -webkit-flex: 0 0 100%;
        flex: 0 0 100%;
        margin-bottom: 3em;
        -moz-transition: color var(--trn-ease-medium);
        -o-transition: color var(--trn-ease-medium);
        -webkit-transition: color var(--trn-ease-medium);
        transition: color var(--trn-ease-medium);
        cursor: pointer;
    }

        section.events.flex article:hover {
            text-decoration: underline;
        }

        section.events.flex article:last-child {
            margin-bottom: 0;
        }

        section.events.flex article figure {
            padding: 0;
            margin: 0 0 1em 0;
            width: 100%;
        }

        section.events.flex article h2 {
            font-family: var(--font-text);
            font-size: var(--font-p);
            margin-bottom: 0.25em;
            text-align: left;
        }

        section.events.flex article p {
            font-size: var(--font-p-small);
            margin-bottom: 0.25em;
        }

    section.events.flex div.more {
        -ms-flex: 0 0 100%;
        -webkit-flex: 0 0 100%;
        flex: 0 0 100%;
        text-align: center;
    }

        section.events.flex div.more.one {
            display: none;
        }

    section.events.flex button {
        justify-self: center;
        -ms-flex: 0 0 10em;
        -webkit-flex: 0 0 10em;
        flex: 0 0 10em;
        margin: var(--spc-vertical-half) auto 0 auto;
        position: relative;
        padding-right: 2em;
    }

        section.events.flex button:after {
            content: var(--icons-arrow-right-medium);
            -moz-filter: var(--svg-aqua);
            -ms-filter: var(--svg-aqua);
            -webkit-filter: var(--svg-aqua);
            filter: var(--svg-aqua);
            width: 1.25em;
            position: absolute;
            top: 0.7em;
            right: 0.5em;
            -ms-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
            -moz-transition: all var(--trn-ease-medium);
            -o-transition: all var(--trn-ease-medium);
            -webkit-transition: all var(--trn-ease-medium);
            transition: all var(--trn-ease-medium);
        }

        section.events.flex button:hover:after {
            -moz-filter: var(--svg-white);
            -ms-filter: var(--svg-white);
            -webkit-filter: var(--svg-white);
            filter: var(--svg-white);
        }

        section.events.flex button.loading:after, section.events.flex button.full:after {
            -moz-filter: var(--svg-dark-grey);
            -ms-filter: var(--svg-dark-grey);
            -webkit-filter: var(--svg-dark-grey);
            filter: var(--svg-dark-grey);
        }

        section.events.flex button span.loader {
            display: none;
        }

        section.events.flex button.loading {
            transition: none;
        }

            section.events.flex button.loading span {
                display: none;
            }

                section.events.flex button.loading span.loader {
                    display: block;
                }

            section.events.flex button.loading:hover {
                background-color: #fff;
                color: #000;
                cursor: default;
            }

        section.events.flex button.full {
            color: #000;
            border-color: #000;
            opacity: 0.2;
            transition: none;
        }

            section.events.flex button span.full, section.events.flex button.full span {
                display: none;
            }

                section.events.flex button.full span.full {
                    display: block;
                }

            section.events.flex button.full:hover {
                background-color: #fff;
                color: #000;
                cursor: default;
            }

    section.events.flex article:last-of-type {
        margin-bottom: 0;
    }


@media screen and (min-width: 800px) {
    section.events.flex {
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-items: flex-start;
        align-items: flex-start;
        padding-top: 3em;
    }

        section.events.flex:not(.wide):not(:first-of-type) {
            padding-top: 3em;
        }


        section.events.flex article {
            -ms-flex: 0 0 47%;
            -webkit-flex: 0 0 47%;
            flex: 0 0 47%;
            padding: 0;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

            section.events.flex article:nth-last-of-type(-n+2) {
                margin-bottom: 0;
            }

            section.events.flex article p {
                font-size: var(--font-small);
            }

        section.events.flex button {
            margin-top: var(--spc-vertical-full);
        }
}

/*#endregion */
