/* ############################################################################
   ##
   ##  CONTENT ROTATOR
   ##
   ######################################################################### */

/* ####################################
   Customisations - See below...
   ################################## */

/* 
	Custom elements should be placed at the bottom of the file so that overrides
	can be set if needed, and to make file comparisons during version upgrades easier.
*/

/* ####################################
   Core Rotator Behaviour
   DO NOT CHANGE THIS STUFF UNLESS YOU KNOW EXACTLY WHAT YOU'RE DOING OR YOU WILL BREAK THE CMS FOR AUTHORS!!
   YOU WILL BREAK IT!!!!
   Things that you can customise without much risk are set up at the bottom of this file.
   ################################## */

.rotator::before {
    display: none;
}

.rotator {
    position: relative;
    width: 100%;
    height: 350px; /* rotator height must be set, so this is the default. Override it on individual rotators as needed. */
    z-index: 0;
}

    .rotator .rotator-nav {
        display: none; /* Turned on by individual layouts. */
        z-index: 2;
    }

        .rotator .rotator-nav .rotator-link {
        }

            .rotator .rotator-nav .rotator-link a {
            }

            .rotator .rotator-nav .rotator-link:hover {
            }

        .rotator .rotator-nav .rotator-link.selected {
        }

    .rotator .rotator-elements {
        position: absolute;
        top: 0;
        left: 0; /* Important for older browsers */
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 1;
    }

        .rotator .rotator-elements .rotator-element {
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .rotator .rotator-elements .rotator-element:not(:first-child) {
            display: none;
        }

        /* Turn off the hard coded background image for all image positions except backgroundCenter and backgroundTile. They have to be explicitly named so that backgroundCenter/Tile can have adequate specificity. */
        .rotator.images_backgroundFill .rotator-elements .rotator-element,
        .rotator.images_leftTop .rotator-elements .rotator-element,
        .rotator.images_leftBottom .rotator-elements .rotator-element,
        .rotator.images_rightTop .rotator-elements .rotator-element,
        .rotator.images_rightBottom .rotator-elements .rotator-element {
            background-image: none;
        }

            .rotator .rotator-elements .rotator-element .page-fragment {
                position: absolute;
                width: 100%;
                height: 100%; 
            }

                .rotator .rotator-elements .rotator-element .page-fragment .thumbnail {
                    /* Image positioning for different rotators is below. Best not to set styles here. */
                }

                    .rotator .rotator-elements .rotator-element .page-fragment .thumbnail a {
                    }

                .rotator .rotator-elements .rotator-element .page-fragment .text {
                    position: absolute;
                }

            /* Image positioning */
            
                .rotator.images_backgroundFit .rotator-elements .rotator-element .page-fragment .thumbnail {
                    position: absolute !important;
                    width: 100% !important;
                    height: 100% !important;
                    padding-left: 0 !important;
                    padding-right: 0 !important;
                    padding-top: 0 !important;
                    padding-bottom: 0 !important;
                }

                    .rotator.images_backgroundFit .rotator-elements .rotator-element .page-fragment .thumbnail a {
                        position: absolute !important; 
                        height: 100% !important;
                        width: 100% !important;
                        line-height: 0 !important; /* Avoid spacing issues in some conditions */
                    }

                        .rotator.images_backgroundFit .rotator-elements .rotator-element .page-fragment .thumbnail img {
                            /* The image may or may not appear inside an anchor tag */
                            width: 100% !important;
                            height: 100% !important;
                            min-height: 100% !important;
                            min-width: 100% !important;
                        }

                .rotator.images_backgroundFill .rotator-elements .rotator-element .page-fragment .thumbnail {
                    position: relative !important;
                    width: 100% !important;
                    height: 100% !important; /* Helps with image sizing. */
                    margin: 0 !important;
                    padding: 0 !important;

                    display: flex !important;
                    justify-content: center !important; /* add to align horizontal */
                    align-items: center !important; /* add to align vertical */
                }

                    .rotator.images_backgroundFill .rotator-elements .rotator-element .page-fragment .thumbnail img {
                        /* The image may or may not appear inside an anchor tag. This covers both conditions. */
                        margin: auto !important;
                        width: auto !important;
                        height: auto !important;
                        min-width: 100% !important;
                        min-height: 100% !important;
                        max-width: none !important;
                        max-height: none !important;
                        position: absolute !important;
                        top: -10000em !important;
                        right: -10000em !important;
                        bottom: -10000em !important;
                        left: -10000em !important;
                    }

                        .rotator.images_backgroundFill.image-fill-height .rotator-elements .rotator-element .page-fragment .thumbnail img {
                            height: 100% !important;
                            min-width: 0 !important;
                        }

                        .rotator.images_backgroundFill.image-fill-width .rotator-elements .rotator-element .page-fragment .thumbnail img {
                            width: 100% !important;
                            min-width: 100% !important;
                            max-width: 100% !important;
                            height: auto !important;
                            min-height: 100% !important;
                            left: 0 !important;
                            right: auto !important;
                        }

                    .rotator.images_backgroundFill .rotator-elements .rotator-element .page-fragment .thumbnail a {
                        display: contents; /* Ignore the link for layout, show the image as it would be if it wasn't inside a link. Edge doesn't understand this, nor of course does IE. */
                        position: absolute !important; 
                        min-width: 100% !important;
                        min-height: 100% !important;
                        line-height: 0 !important; /* Avoid spacing issues in some conditions */
                    }

                    @media all and (-ms-high-contrast:none) {
                        /* Rules for IE only. */

                        .rotator.images_backgroundFill .rotator-elements .rotator-element {
                            background-image: inherit;
                            background-size: cover;
                            background-position: center;
                            background-repeat: no-repeat;

                            /* Make backgroundFill behave like backgroundCenter. Won't work well for images in certain aspect ratios (e.g. thin images in wide banners). */
                            /*background-size: auto 100%;*/ /* Fill the height, assume the image aspect ratio is always always wide enough to fill the width at maximum width */
                            /*background-size: 100%;*/ /* Fill the height and width, this should work okay for tall rotators on large screens. */
                            /*background-position: center 50%;*/ /* Might be needed in combination with background-size: auto 100%; */
                        }

                        .rotator.images_backgroundFill .rotator-elements .rotator-element .page-fragment .thumbnail {
                            display: none !important;
                        }

                    }

                    @supports (-ms-ime-align:auto) {
                        /* Rules for Edge only */

                        .strangeBugFix {
                            /* 9.2.1: Leave this rule here. Something in our latest CMS (JS handling image lazy loading perhaps?) is causing Edge to ignore the first rule in this block. This is a quick fix until we find a better way. */
                        }

                        .rotator.images_backgroundFill .rotator-elements .rotator-element {
                            background-image: inherit;
                            background-size: cover;
                            background-position: center;
                            background-repeat: no-repeat;
                        }

                        .rotator.images_backgroundFill .rotator-elements .rotator-element .page-fragment .thumbnail {
                            display: none !important;
                        }

                        .rotator.images_backgroundFill .rotator-elements .rotator-element .page-fragment .thumbnail a img {
                            /* When the image is inside an anchor tag, Edge doesn't behave like the other browsers with position: absolute; */
                            /*position: relative !important;*/ /* Not needed when using background-size: cover; */
                        }

                    }

                    /* To stop shrinking at smaller screen sizes, uncomment the following rule and pick the right width. */
                    /*
                    @media screen and (max-width: 767px) {
                        .rotator.images_backgroundFill .rotator-elements .rotator-element .page-fragment .thumbnail img {
                            width: auto;
                        }
                    }
                    */

                .rotator.images_backgroundFillLeftTop .rotator-elements .rotator-element .page-fragment .thumbnail,
                .rotator.images_backgroundFillLeftBottom .rotator-elements .rotator-element .page-fragment .thumbnail,
                .rotator.images_backgroundFillRightTop .rotator-elements .rotator-element .page-fragment .thumbnail,
                .rotator.images_backgroundFillRightBottom .rotator-elements .rotator-element .page-fragment .thumbnail {
                    position: absolute !important;
                    width: 100% !important;
                    height: 100% !important; /* Helps with image sizing. */
                }

                    .rotator.images_backgroundFillLeftTop .rotator-elements .rotator-element .page-fragment .thumbnail img,
                    .rotator.images_backgroundFillLeftBottom .rotator-elements .rotator-element .page-fragment .thumbnail img,
                    .rotator.images_backgroundFillRightTop .rotator-elements .rotator-element .page-fragment .thumbnail img,
                    .rotator.images_backgroundFillRightBottom .rotator-elements .rotator-element .page-fragment .thumbnail img {
                        position: absolute !important;
                        min-width: 100% !important;
                        min-height: 100% !important;
                    }

                    .rotator.images_backgroundFillLeftTop .rotator-elements .rotator-element .page-fragment .thumbnail img {
                        top: 0;
                        left: 0;
                    }

                    .rotator.images_backgroundFillLeftBottom .rotator-elements .rotator-element .page-fragment .thumbnail img {
                        bottom: 0;
                        left: 0;
                    }

                    .rotator.images_backgroundFillRighttTop .rotator-elements .rotator-element .page-fragment .thumbnail img {
                        top: 0;
                        right: 0;
                    }

                    .rotator.images_backgroundFillRightBottom .rotator-elements .rotator-element .page-fragment .thumbnail img {
                        bottom: 0;
                        right: 0;
                    }

                .rotator.images_backgroundTile .rotator-elements .rotator-element .page-fragment .thumbnail {
                    display: none;
                }

                    .rotator.images_backgroundTile .rotator-elements .rotator-element {
                        background-position: left top;
                        background-repeat: repeat;
                    }

                .rotator.images_backgroundCenter .rotator-elements .rotator-element .page-fragment .thumbnail {
                    display: none;
                }

                    .rotator.images_backgroundCenter .rotator-elements .rotator-element {
                        background-position: center 50%;
                        background-repeat: no-repeat;
                    }

                .rotator.images_leftTop .rotator-elements .rotator-element .page-fragment .thumbnail {
                    position: absolute;
                    top: 0;
                    left: 0;
                }

                    .rotator.images_leftTop .rotator-elements .rotator-element .page-fragment .thumbnail img {
                        width: auto;
                    }

                .rotator.images_leftBottom .rotator-elements .rotator-element .page-fragment .thumbnail {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                }

                    .rotator.images_leftBottom .rotator-elements .rotator-element .page-fragment .thumbnail img {
                        width: auto;
                    }

                .rotator.images_rightTop .rotator-elements .rotator-element .page-fragment .thumbnail {
                    position: absolute;
                    top: 0;
                    right: 0;
                }

                    .rotator.images_rightTop .rotator-elements .rotator-element .page-fragment .thumbnail img {
                        width: auto;
                    }

                .rotator.images_rightBottom .rotator-elements .rotator-element .page-fragment .thumbnail {
                    position: absolute;
                    bottom: 0;
                    right: 0;
                }

                    .rotator.images_rightBottom .rotator-elements .rotator-element .page-fragment .thumbnail img {
                        width: auto;
                    }

                .rotator.images_leftTop .rotator-elements .rotator-element .page-fragment .thumbnail,
                .rotator.images_leftBottom .rotator-elements .rotator-element .page-fragment .thumbnail,
                .rotator.images_centerTop .rotator-elements .rotator-element .page-fragment .thumbnail,
                .rotator.images_centerBottom .rotator-elements .rotator-element .page-fragment .thumbnail,
                .rotator.images_rightTop .rotator-elements .rotator-element .page-fragment .thumbnail,
                .rotator.images_rightBottom .rotator-elements .rotator-element .page-fragment .thumbnail {
                    width: 100%;
                }

                    .rotator.images_leftTop .rotator-elements .rotator-element .page-fragment .thumbnail img,
                    .rotator.images_leftBottom .rotator-elements .rotator-element .page-fragment .thumbnail img,
                    .rotator.images_centerTop .rotator-elements .rotator-element .page-fragment .thumbnail img,
                    .rotator.images_centerBottom .rotator-elements .rotator-element .page-fragment .thumbnail img,
                    .rotator.images_rightTop .rotator-elements .rotator-element .page-fragment .thumbnail img,
                    .rotator.images_rightBottom .rotator-elements .rotator-element .page-fragment .thumbnail img {
                        min-width: 100%;
                    }

            /* Video */

            .rotator .rotator-elements .rotator-element .page-fragment .video {
                position: absolute !important;
                top: -10000em !important;
                bottom: -10000em !important;
                left: -10000em !important;
                right: -10000em !important;
                min-width: 100% !important;
                width: 100% !important;
                min-width: 100% !important;
                max-width: 100% !important;
                padding-top: 56.25% !important;
                max-height: none !important;
                height: auto !important;
                margin: auto !important;
                overflow: hidden !important;
            }

                .rotator .rotator-elements .rotator-element .page-fragment .video iframe,
                .rotator .rotator-elements .rotator-element .page-fragment .video video {
                    position: absolute !important;
                    width: 100% !important;
                    height: 100% !important;
                    top: 0 !important;
                    left: 0 !important;
                }

                .rotator .rotator-elements .rotator-element .page-fragment .video .content-none {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 100%;
                    height: 100%;
                }

                @media screen and (max-width: 900px) {

                    .rotator .rotator-elements .rotator-element .page-fragment .video {
                        /* Some mobile devices behave a bit differently... In particular this fixes IOS/iPhone weirdness. */
                        position: relative !important;
                        top: 0 !important;
                        bottom: 0 !important;
                        left: 0 !important;
                        right: 0 !important;
                    }

                }

/* 
    Fixed navigation
    Positioning is set up separately below
*/

.rotator.nav_fixed {
}

    .rotator.nav_fixed .rotator-nav {
        display: block;
        position: absolute;
        height: 100%;
        width: 37.5%; 
    }

        .rotator.nav_fixed .rotator-nav .rotator-link {
            display: block;
        }

            .rotator.nav_fixed .rotator-nav .rotator-link a {
                display: block;
            }

            .rotator.nav_fixed .rotator-nav .rotator-link:hover {
                cursor: pointer;
                background: var(--site-color-white);
            }

            .rotator.nav_fixed .rotator-nav .rotator-link.current {
            }

    .rotator.nav_fixed .rotator-elements {
        left: auto; /* Defaults to left nav. Not stricly necessary, but it's here just in case the nav_position style isn't set. */
        right: 0; /* Defaults to left nav. Not stricly necessary, but it's here just in case the nav_position style isn't set. */
        width: 62.5%; /* Default. Must match .rotator.nav_fixed .rotator-nav width. Can be set on individual rotators. */
    }

    /* Nav positioning */

    .rotator.nav_fixed.nav_position_right {
    }

        .rotator.nav_fixed.nav_position_right .rotator-nav {
            right: 0;
        }

        .rotator.nav_fixed.nav_position_right .rotator-elements {
            left: 0;
        }

    .rotator.nav_fixed.nav_position_left {
    }

        .rotator.nav_fixed.nav_position_left .rotator-nav {
            left: 0;
        }

        .rotator.nav_fixed.nav_position_left .rotator-elements {
            left: auto; 
            right: 0;
        }

    .rotator.nav_fixed.nav_position_bottom {
    }

        .rotator.nav_fixed.nav_position_bottom .rotator-nav {
            position: absolute;
            bottom: 0;
            height: auto;
            width: 100%;
        }

            .rotator.nav_fixed.nav_position_bottom .rotator-nav .rotator-link {
                position: relative;
                float: left;
            }

                .rotator.nav_fixed.nav_position_bottom .rotator-nav .rotator-link a {
                    position: relative;
                    float: left;
                    width: auto;
                }

        .rotator.nav_fixed.nav_position_bottom .rotator-elements {
            width: 100%;
        }

    .rotator.nav_fixed.nav_position_bottomCenter {
    }

        .rotator.nav_fixed.nav_position_bottomCenter .rotator-nav {
            position: absolute;
            bottom: 0;
            height: auto;
            width: 100%;
            text-align: center;
        }

            .rotator.nav_fixed.nav_position_bottomCenter .rotator-nav .rotator-link {
                display: inline-block;
            }

                .rotator.nav_fixed.nav_position_bottomCenter .rotator-nav .rotator-link a {
                    width: auto;
                }

        .rotator.nav_fixed.nav_position_bottomCenter .rotator-elements {
            width: 100%;
        }

    .rotator.nav_fixed.nav_position_top {
    }

        .rotator.nav_fixed.nav_position_top .rotator-nav {
            position: relative;
            float: left;
            height: auto;
            width: 100%;
        }

            .rotator.nav_fixed.nav_position_top .rotator-nav .rotator-link {
                position: relative;
                float: left;
            }

                .rotator.nav_fixed.nav_position_top .rotator-nav .rotator-link a {
                    position: relative;
                    float: left;
                    width: auto;
                }

        .rotator.nav_fixed.nav_position_top .rotator-elements {
            position: static;
            clear: left;
            width: 100%;
        }

    .rotator.nav_fixed.nav_position_topCenter {
    }

        .rotator.nav_fixed.nav_position_topCenter .rotator-nav {
            position: relative;
            height: auto;
            width: 100%;
            text-align: center;
        }

            .rotator.nav_fixed.nav_position_topCenter .rotator-nav .rotator-link {
                display: inline-block;
            }

                .rotator.nav_fixed.nav_position_topCenter .rotator-nav .rotator-link a {
                    width: auto;
                }

        .rotator.nav_fixed.nav_position_topCenter .rotator-elements {
            position: static;
            clear: left;
            width: 100%;
        }

/* 
    Overlay navigation
    Positioning is set up separately below
*/

.rotator.nav_overlay {
}

    .rotator.nav_overlay .rotator-nav {
        display: block;
        position: absolute;
        /*width: 100%;*/
    }

        .rotator.nav_overlay .rotator-nav .rotator-link {
            display: inline-block;
        }

            .rotator.nav_overlay .rotator-nav .rotator-link a {
                display: inline-block;
                width: auto;
                padding: 4px 8px;
                margin: 4px;
                background: var(--site-color-white);
                color: var(--site-color-white);
                opacity: 0.85;
                border-radius: 25px;
                border: var(--site-color-white) 2px solid;
            }

            .rotator.nav_overlay .rotator-nav .rotator-link a:hover {
                cursor: pointer;
                color: var(--site-color-white);
                background: var(--site-spot-color-3);
                opacity: 1;
            }

        .rotator.nav_overlay .rotator-nav .rotator-link.current {
        }

            .rotator.nav_overlay .rotator-nav .rotator-link.selected a {
                color: var(--site-color-white);
                background: var(--site-spot-color-1);
                opacity: 1;
            }

                .rotator.nav_overlay .rotator-nav .rotator-link.current a {
                    color: #ffffff;
                    background: var(--site-color-ui-mid-dark);
                }

    /* Nav positioning */

    /* To set all links to the same width for left/right aligned navs, uncomment the following line. */
    /*
    .rotator.nav_overlay.nav_position_leftTop .rotator-nav .rotator-link,
    .rotator.nav_overlay.nav_position_leftBottom .rotator-nav .rotator-link,
    .rotator.nav_overlay.nav_position_rightTop .rotator-nav .rotator-link,
    .rotator.nav_overlay.nav_position_rightBottom .rotator-nav .rotator-link,
    .rotator.nav_overlay.nav_position_leftTop .rotator-nav .rotator-link a,
    .rotator.nav_overlay.nav_position_leftBottom .rotator-nav .rotator-link a,
    .rotator.nav_overlay.nav_position_rightTop .rotator-nav .rotator-link a,
    .rotator.nav_overlay.nav_position_rightBottom .rotator-nav .rotator-link a {
        display: block;
    }
    */

    .rotator.nav_overlay.nav_position_leftTop .rotator-nav {
        top: 30px;
        left: 30px;
    }

    .rotator.nav_overlay.nav_position_leftBottom .rotator-nav {
        bottom: 100px;
        left: 30px;
    }

    .rotator.nav_overlay.nav_position_rightTop .rotator-nav {
        top: 30px;
        right: 30px;
    }

    .rotator.nav_overlay.nav_position_rightBottom .rotator-nav {
        bottom: 110px;
        right: 30px;
    }

    .rotator.nav_overlay.nav_position_centerTop .rotator-nav {
        top: 30px;
        width: 100%;
        text-align: center;
    }

    .rotator.nav_overlay.nav_position_centerBottom .rotator-nav {
        bottom: 110px;
        width: 100%;
        text-align: center;
    }

/* 
    Navigation link styles
*/

.rotator.nav_links_labels {
}

    .rotator.nav_links_labels .rotator-nav .rotator-link a {
    }

.rotator.nav_links_numbers {
}

    .rotator.nav_links_numbers .rotator-nav .rotator-link a {
    }

.rotator.nav_links_buttons {
}

    .rotator.nav_links_buttons .rotator-nav .rotator-link a {
        text-indent: -10000em;
        width: 16px;
        height: 16px;
        padding: 2px;
        border-radius: 100%;
    }

/* 
    No navigation
    (Really the nav element should not be generated by the server in this case, but let's catch it with CSS just in case.)
*/

    .rotator.nav_position_none .rotator-nav {
        display: none !important;
    }

/* ####################################
   Customisations
   ################################## */

/* 
	Put site-wide customisations here. Template-specific customisations should be stored with the template.

    DO NOT change the way that elements such as navigation and image positioning within the rotator work,
    OR YOU WILL BREAK FUNCTIONALITY FOR CMS AUTHORS. Only change colours, borders, padding, margins, and be 
    careful with padding/margins. Otherwise you'll break it! Heights and widths can be set on rotator widget 
    commands, only defaults exist here.

    The typical candidates for customisation are listed below as examples.
*/

.rotator {
    height: 70vmin !important;
    min-height: 580px;
}

    .rotator .rotator-elements .rotator-element .page-fragment:after {
        display: none !important;

        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(/App_Sites/gbcma/Templates/Default/images/hills_shape_1.png);
        background-repeat: repeat-x;
        background-position: left 30px;
        background-size: 100% auto;
        opacity: 0.5;
    }

    .rotator .rotator-elements .rotator-element .page-fragment .thumbnail:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.125);
    }

    .rotator .rotator-elements .rotator-element .page-fragment .text {
        position: absolute;
        left: 30px;
        bottom: 110px;
        box-sizing: border-box;
        width: 50%;
        width: calc(50% - 60px);
        background-color: rgba(0,0,0,0.5);
        padding: 40px;
        border-radius: 4px;
    }

        .rotator .rotator-elements .rotator-element .page-fragment .text .title {
            margin: 0 0 10px;
            color: var(--site-color-white);
            font-family: 'Zurich Condensed Bold', Arial, Helvetica, sans-serif;
            font-size: 187.5%;
            background-color: transparent;
            text-decoration: none;
        }

            .rotator .rotator-elements .rotator-element .page-fragment .text .title:hover {
                text-decoration: underline;
            }

            .rotator .rotator-elements .rotator-element .page-fragment .text .title a {
                color: var(--site-color-white);
            }

        .rotator .rotator-elements .rotator-element .page-fragment .text .summary {
            color: var(--site-color-white);
            font-family: 'Zurich Light', Arial, Helvetica, sans-serif;
            font-size: 150%;
        }

            .rotator .rotator-elements .rotator-element .page-fragment .text .summary a {
                color: var(--site-spot-color-3);
                font-family: 'Zurich Light Bold', Arial, Helvetica, sans-serif;
                text-decoration: underline;
            }

                .rotator .rotator-elements .rotator-element .page-fragment .text .summary a:hover {
                    color: var(--site-color-white);
                }

            .rotator .rotator-elements .rotator-element .page-fragment .text .summary .span-read-more {
                display: block;
                margin-top: 15px;
            }

                .rotator .rotator-elements .rotator-element .page-fragment .text .summary .span-read-more a.link-read-more {
                    text-align: left;
                    display: inline-block;
                    padding: 10px 20px;
                    color: var(--site-color-1-mid-light);
                    font-weight: bold;
                    font-size: var(--site-font-size-tiny);
                    text-decoration: none;
                }

                    .rotator .rotator-elements .rotator-element .page-fragment .text .summary .span-read-more a.link-read-more:hover {
                        background-color: var(--site-spot-color-3);
                        border-color: var(--site-spot-color-3) !important;
                        color: var(--site-color-white);
                    }

    .rotator .rotator-elements .rotator-element .page-fragment .text .title a:link {
        color: var(--site-color-white);
    }

    .Section1_gbcma_revegetation .rotator,
    .Section1_gbcma_ispy-barmah .rotator {
    }

        .Section1_gbcma_revegetation .rotator,
        .Section1_gbcma_ispy-barmah .rotator {
            height: 300px !important;
            min-height: 0;
            border-bottom: none;
        }

            .Section1_gbcma_revegetation .rotator .rotator-nav,
            .Section1_gbcma_ispy-barmah .rotator .rotator-nav {
                bottom: 100px !important;
                width: 100%;
                text-align: center;
                opacity: 0.5;
                transition: 100ms opacity ease-in-out;
            }

                .rotator.nav_links_buttons .rotator-nav .rotator-link a {
                    width: 8px;
                    height: 8px;
                    transition: 200ms all ease-in-out;
                }

                .Section1_gbcma_revegetation .rotator .rotator-nav:hover,
                .Section1_gbcma_ispy-barmah .rotator .rotator-nav:hover {
                    opacity: 1;
                }

                    .Section1_gbcma_revegetation .rotator .rotator-nav:hover a,
                    .Section1_gbcma_ispy-barmah .rotator .rotator-nav:hover a {
                        width: 16px;
                        height: 16px;
                    }

            .Section1_gbcma_revegetation .rotator-elements .rotator-element .page-fragment .text,
            .Section1_gbcma_ispy-barmah .rotator-elements .rotator-element .page-fragment .text {
                padding: 0;
                bottom: auto;
                top: 60px;
                font-size: 87.5%;
                background: none;
            }

@media screen and (min-width: 1600px) {

    .Section1_gbcma_revegetation .rotator-elements .rotator-element .page-fragment .text,
    .Section1_gbcma_ispy-barmah .rotator-elements .rotator-element .page-fragment .text {
        margin-left: calc(50% - 800px);
    }

}

@media screen and (max-width: 1024px) {

    .Section1_gbcma_revegetation .rotator-elements .rotator-element .page-fragment .text,
    .Section1_gbcma_ispy-barmah .rotator-elements .rotator-element .page-fragment .text {
        left: 30px !important;
        padding: 0 !important;
    }

}

@media screen and (max-width: 767px) {

    .rotator {
        min-height: 0;
    }

    .Section1_gbcma_revegetation .rotator-elements .rotator-element .page-fragment .text,
    .Section1_gbcma_ispy-barmah .rotator-elements .rotator-element .page-fragment .text {
        left: 15px !important;
        font-size: 100%;
    }

}

/* ############################################################################
   ## 
   ##  LAYOUT FOR DIFFERENT SCREENS
   ##
   ##  Be sure to co-ordinate these layouts with the responsive sizes used in all templates in the site, or you'll run into trouble.
   ##
   ######################################################################### */

@media screen and (max-width: 1380px) {

    .rotator .rotator-elements .rotator-element .page-fragment .text {
        width: 65%;
    }

}

@media screen and (max-width: 1024px) {

    .rotator.nav_overlay.nav_position_rightBottom .rotator-nav {
        bottom: 80px;
    }

    .rotator.nav_overlay.nav_position_centerBottom .rotator-nav {
        bottom: 80px;
    }

    .rotator .rotator-elements .rotator-element .page-fragment .text {
        bottom: 80px;
        padding: 20px 30px;
    }

        .rotator .rotator-elements .rotator-element .page-fragment .text .title {
            font-size: 150%;
        }

        .rotator .rotator-elements .rotator-element .page-fragment .text .summary {
            font-size: 125%;
        }

}

@media screen and (max-width: 768px) {

    .rotator {
        border-bottom: 5px solid var(--site-spot-color-1);
    }

    .rotator.nav_overlay.nav_position_rightBottom .rotator-nav {
        max-width: 30px;
        bottom: 30px;
    }

    .rotator.nav_overlay.nav_position_centerBottom .rotator-nav {
        bottom: 30px;
    }

    .rotator .rotator-elements .rotator-element .page-fragment .text {
        bottom: 30px;
        padding: 20px 30px;
    }

        .rotator .rotator-elements .rotator-element .page-fragment .text .title {
            font-size: 125%;
        }

        .rotator .rotator-elements .rotator-element .page-fragment .text .summary {
            font-size: 100%;
        }

            .rotator .rotator-elements .rotator-element .page-fragment .text .summary .span-read-more a {
                font-size: 90%;
            }

    .rotator.images_backgroundFill .rotator-elements .rotator-element .page-fragment .thumbnail img {
        height: 100%; /* Good for landscape-style images, so that they still fill the background. */
    }


}

@media screen and (max-width: 600px) {

    .rotator.nav_overlay.nav_position_rightBottom .rotator-nav {
        max-width: 30px;
        bottom: 20px;
        right: 20px;
    }

    .rotator.nav_overlay.nav_position_centerBottom .rotator-nav {
        bottom: 20px;
        right: 20px;
    }

    .rotator .rotator-elements .rotator-element .page-fragment .text {
        left: 20px;
        bottom: 20px;
        padding: 15px 20px;
    }

}

@media screen and (max-width: 480px) {

    .rotator {
        height: 90vmin !important;
    }

    .rotator.nav_overlay.nav_position_rightBottom .rotator-nav {
        max-width: none;
        bottom: 16px;
        right: 10px;
    }

    .rotator.nav_links_buttons .rotator-nav .rotator-link a {
        width: 6px;
        height: 6px;
        padding: 0;
        border: var(--site-color-white) 1px solid;
    }

    .rotator .rotator-elements .rotator-element .page-fragment .text {
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 15px;
    }

        .rotator .rotator-elements .rotator-element .page-fragment .text .title {
            font-size: 100%;
        }

        .rotator .rotator-elements .rotator-element .page-fragment .text .summary {
            font-size: 90%;
        }

            .rotator .rotator-elements .rotator-element .page-fragment .text .summary .span-read-more a {
                padding: 8px 15px;
                font-size: 90%;
                border: var(--site-color-white) 1px solid;
                background: transparent;
            }

}

@media screen and (max-width: 320px) {

}