/* ############################################################################
   ##
   ##  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;
    float: left;
    width: 100%;
    height: 250px; /* rotator height must be set, so this is the default. Override it on individual rotators if needed. */
    overflow: hidden;
    z-index: 0;
}

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

        .rotator .rotatorNav .rotatorLink {
        }

            .rotator .rotatorNav .rotatorLink a {
            }

            .rotator .rotatorNav .rotatorLink:hover {
            }

        .rotator .rotatorNav .rotatorLink.selected {
        }

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

        .rotator .rotatorElements .rotatorElement {
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        /* 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 .rotatorElements .rotatorElement,
        .rotator.images_leftTop .rotatorElements .rotatorElement,
        .rotator.images_leftBottom .rotatorElements .rotatorElement,
        .rotator.images_rightTop .rotatorElements .rotatorElement,
        .rotator.images_rightBottom .rotatorElements .rotatorElement {
            background-image: none;
        }

            .rotator .rotatorElements .rotatorElement .pageFragment {
                position: relative;
                width: 100%;
                height: 100%; 
            }

                .rotator .rotatorElements .rotatorElement .pageFragment .thumbnail {
                    /* Image positioning for different rotators is below. Best not to set styles here. */
                }

                    .rotator .rotatorElements .rotatorElement .pageFragment .thumbnail a {
                    }

                .rotator .rotatorElements .rotatorElement .pageFragment .text {
                    position: absolute;
                }

            /* Image positioning */

                .rotator.images_backgroundFit .rotatorElements .rotatorElement .pageFragment .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 .rotatorElements .rotatorElement .pageFragment .thumbnail a {
                        position: absolute !important; 
                        height: 100% !important;
                        width: 100% !important;
                        line-height: 0 !important; /* Avoid spacing issues in some conditions */
                    }

                        .rotator.images_backgroundFit .rotatorElements .rotatorElement .pageFragment .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 .rotatorElements .rotatorElement .pageFragment .thumbnail {
                    position: absolute !important;
                    top: 0 !important; /* Fill up the space */
                    bottom: 0 !important; /* Fill up the space */
                    left: 0 !important; /* Fill up the space */
                    right: 0 !important; /* Fill up the space */
                    width: 100% !important;
                    height: 100% !important; /* Helps with image sizing. */
                    max-width: none !important;
                    max-height: none !important;
                    margin: 0 !important;
                    padding: 0 !important;

                    display: -webkit-box !important;
                    display: -moz-box !important;
                    display: -ms-flexbox !important;
                    display: -webkit-flex !important;
                    display: flex !important;
                    -webkit-justify-content: center !important; /* add to align horizontal */
                    justify-content: center !important; /* add to align horizontal */
                    align-items: center !important; /* add to align vertical */
                }
                    
                    .rotator.images_backgroundFill .rotatorElements .rotatorElement .pageFragment .thumbnail img {
                        /* The image may or may not appear inside an anchor tag. This covers both conditions. */
                        position: absolute !important; 
                        min-width: 100% !important;
                        max-width: none !important;
                        min-height: 100% !important;
                    }

                    .rotator.images_backgroundFill .rotatorElements .rotatorElement .pageFragment .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 .rotatorElements .rotatorElement {
                            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 .rotatorElements .rotatorElement .pageFragment .thumbnail {
                            display: none !important;
                        }

                    }

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

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

                        .rotator.images_backgroundFill .rotatorElements .rotatorElement .pageFragment .thumbnail {
                            display: none !important;
                        }

                        .rotator.images_backgroundFill .rotatorElements .rotatorElement .pageFragment .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 .rotatorElements .rotatorElement .pageFragment .thumbnail img {
                            width: auto;
                        }
                    }
                    */

                .rotator.images_backgroundFillLeftTop .rotatorElements .rotatorElement .pageFragment .thumbnail,
                .rotator.images_backgroundFillLeftBottom .rotatorElements .rotatorElement .pageFragment .thumbnail,
                .rotator.images_backgroundFillRightTop .rotatorElements .rotatorElement .pageFragment .thumbnail,
                .rotator.images_backgroundFillRightBottom .rotatorElements .rotatorElement .pageFragment .thumbnail {
                    position: absolute !important;
                    width: 100% !important;
                    height: 100% !important; /* Helps with image sizing. */
                }

                    .rotator.images_backgroundFillLeftTop .rotatorElements .rotatorElement .pageFragment .thumbnail img,
                    .rotator.images_backgroundFillLeftBottom .rotatorElements .rotatorElement .pageFragment .thumbnail img,
                    .rotator.images_backgroundFillRightTop .rotatorElements .rotatorElement .pageFragment .thumbnail img,
                    .rotator.images_backgroundFillRightBottom .rotatorElements .rotatorElement .pageFragment .thumbnail img {
                        position: absolute !important;
                        min-width: 100% !important;
                        min-height: 100% !important;
                    }

                    .rotator.images_backgroundFillLeftTop .rotatorElements .rotatorElement .pageFragment .thumbnail img {
                        top: 0;
                        left: 0;
                    }

                    .rotator.images_backgroundFillLeftBottom .rotatorElements .rotatorElement .pageFragment .thumbnail img {
                        bottom: 0;
                        left: 0;
                    }

                    .rotator.images_backgroundFillRighttTop .rotatorElements .rotatorElement .pageFragment .thumbnail img {
                        top: 0;
                        right: 0;
                    }

                    .rotator.images_backgroundFillRightBottom .rotatorElements .rotatorElement .pageFragment .thumbnail img {
                        bottom: 0;
                        right: 0;
                    }

                .rotator.images_backgroundTile .rotatorElements .rotatorElement .pageFragment .thumbnail {
                    display: none;
                }

                    .rotator.images_backgroundTile .rotatorElements .rotatorElement {
                        background-position: left top;
                        background-repeat: repeat;
                    }

                .rotator.images_backgroundCenter .rotatorElements .rotatorElement .pageFragment .thumbnail {
                    display: none;
                }

                    .rotator.images_backgroundCenter .rotatorElements .rotatorElement {
                        background-position: center 50%;
                        background-repeat: no-repeat;
                    }

                .rotator.images_leftTop .rotatorElements .rotatorElement .pageFragment .thumbnail {
                    position: absolute;
                    top: 0;
                    left: 0;
                }

                    .rotator.images_leftTop .rotatorElements .rotatorElement .pageFragment .thumbnail img {
                        width: auto;
                    }

                .rotator.images_leftBottom .rotatorElements .rotatorElement .pageFragment .thumbnail {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                }

                    .rotator.images_leftBottom .rotatorElements .rotatorElement .pageFragment .thumbnail img {
                        width: auto;
                    }

                .rotator.images_rightTop .rotatorElements .rotatorElement .pageFragment .thumbnail {
                    position: absolute;
                    top: 0;
                    right: 0;
                }

                    .rotator.images_rightTop .rotatorElements .rotatorElement .pageFragment .thumbnail img {
                        width: auto;
                    }

                .rotator.images_rightBottom .rotatorElements .rotatorElement .pageFragment .thumbnail {
                    position: absolute;
                    bottom: 0;
                    right: 0;
                }

                    .rotator.images_rightBottom .rotatorElements .rotatorElement .pageFragment .thumbnail img {
                        width: auto;
                    }

                .rotator.images_leftTop .rotatorElements .rotatorElement .pageFragment .thumbnail,
                .rotator.images_leftBottom .rotatorElements .rotatorElement .pageFragment .thumbnail,
                .rotator.images_centerTop .rotatorElements .rotatorElement .pageFragment .thumbnail,
                .rotator.images_centerBottom .rotatorElements .rotatorElement .pageFragment .thumbnail,
                .rotator.images_rightTop .rotatorElements .rotatorElement .pageFragment .thumbnail,
                .rotator.images_rightBottom .rotatorElements .rotatorElement .pageFragment .thumbnail {
                    width: 100%;
                }

                    .rotator.images_leftTop .rotatorElements .rotatorElement .pageFragment .thumbnail img,
                    .rotator.images_leftBottom .rotatorElements .rotatorElement .pageFragment .thumbnail img,
                    .rotator.images_centerTop .rotatorElements .rotatorElement .pageFragment .thumbnail img,
                    .rotator.images_centerBottom .rotatorElements .rotatorElement .pageFragment .thumbnail img,
                    .rotator.images_rightTop .rotatorElements .rotatorElement .pageFragment .thumbnail img,
                    .rotator.images_rightBottom .rotatorElements .rotatorElement .pageFragment .thumbnail img {
                        min-width: 100%;
                    }

            /* Video */

            .rotator .rotatorElements .rotatorElement .pageFragment .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 .rotatorElements .rotatorElement .pageFragment .video iframe,
                .rotator .rotatorElements .rotatorElement .pageFragment .video video {
                    position: absolute !important;
                    width: 100% !important;
                    height: 100% !important;
                    top: 0 !important;
                    left: 0 !important;
                }

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

.rotator.nav_fixed {
}

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

        .rotator.nav_fixed .rotatorNav .rotatorLink {
            display: block;
        }

            .rotator.nav_fixed .rotatorNav .rotatorLink a {
                display: block;
            }

            .rotator.nav_fixed .rotatorNav .rotatorLink:hover {
                cursor: pointer;
                background: #ffffff; 
            }

            .rotator.nav_fixed .rotatorNav .rotatorLink.current {
            }

    .rotator.nav_fixed .rotatorElements {
        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 .rotatorNav width. Can be set on individual rotators. */
    }

    /* Nav positioning */

    .rotator.nav_fixed.nav_position_right {
    }

        .rotator.nav_fixed.nav_position_right .rotatorNav {
            right: 0;
        }

        .rotator.nav_fixed.nav_position_right .rotatorElements {
            left: 0;
        }

    .rotator.nav_fixed.nav_position_left {
    }

        .rotator.nav_fixed.nav_position_left .rotatorNav {
            left: 0;
        }

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

    .rotator.nav_fixed.nav_position_bottom {
    }

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

            .rotator.nav_fixed.nav_position_bottom .rotatorNav .rotatorLink {
                position: relative;
                float: left;
            }

                .rotator.nav_fixed.nav_position_bottom .rotatorNav .rotatorLink a {
                    position: relative;
                    float: left;
                    width: auto;
                }

        .rotator.nav_fixed.nav_position_bottom .rotatorElements {
            width: 100%;
        }

    .rotator.nav_fixed.nav_position_bottomCenter {
    }

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

            .rotator.nav_fixed.nav_position_bottomCenter .rotatorNav .rotatorLink {
                display: inline-block;
            }

                .rotator.nav_fixed.nav_position_bottomCenter .rotatorNav .rotatorLink a {
                    width: auto;
                }

        .rotator.nav_fixed.nav_position_bottomCenter .rotatorElements {
            width: 100%;
        }

    .rotator.nav_fixed.nav_position_top {
    }

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

            .rotator.nav_fixed.nav_position_top .rotatorNav .rotatorLink {
                position: relative;
                float: left;
            }

                .rotator.nav_fixed.nav_position_top .rotatorNav .rotatorLink a {
                    position: relative;
                    float: left;
                    width: auto;
                }

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

    .rotator.nav_fixed.nav_position_topCenter {
    }

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

            .rotator.nav_fixed.nav_position_topCenter .rotatorNav .rotatorLink {
                display: inline-block;
            }

                .rotator.nav_fixed.nav_position_topCenter .rotatorNav .rotatorLink a {
                    width: auto;
                }

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

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

.rotator.nav_overlay {
}

    .rotator.nav_overlay .rotatorNav {
        display: block;
        position: absolute;
    }

        .rotator.nav_overlay .rotatorNav .rotatorLink {
            display: inline-block;
        }

            .rotator.nav_overlay .rotatorNav .rotatorLink a {
                display: inline-block;
                width: auto;
                padding: 4px;
                margin: 4px;
                background: #ffffff;
            }

            .rotator.nav_overlay .rotatorNav .rotatorLink a:hover {
                cursor: pointer;
                color: #ffffff;
                background: #787878;
            }

            .rotator.nav_overlay .rotatorNav .rotatorLink.current {
            }

                .rotator.nav_overlay .rotatorNav .rotatorLink.current a {
                color: #ffffff;
                background: #606060;
            }

    /* 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 .rotatorNav .rotatorLink,
    .rotator.nav_overlay.nav_position_leftBottom .rotatorNav .rotatorLink,
    .rotator.nav_overlay.nav_position_rightTop .rotatorNav .rotatorLink,
    .rotator.nav_overlay.nav_position_rightBottom .rotatorNav .rotatorLink,
    .rotator.nav_overlay.nav_position_leftTop .rotatorNav .rotatorLink a,
    .rotator.nav_overlay.nav_position_leftBottom .rotatorNav .rotatorLink a,
    .rotator.nav_overlay.nav_position_rightTop .rotatorNav .rotatorLink a,
    .rotator.nav_overlay.nav_position_rightBottom .rotatorNav .rotatorLink a {
        display: block;
    }
    */

    .rotator.nav_overlay.nav_position_leftTop .rotatorNav {
        top: 10px;
        left: 10px;
    }

    .rotator.nav_overlay.nav_position_leftBottom .rotatorNav {
        bottom: 10px;
        left: 10px;
    }

    .rotator.nav_overlay.nav_position_rightTop .rotatorNav {
        top: 10px;
        right: 10px;
    }

    .rotator.nav_overlay.nav_position_rightBottom .rotatorNav {
        bottom: 10px;
        right: 10px;
    }

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

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

/* 
    Navigation link styles
*/

.rotator.nav_links_labels {
}

    .rotator.nav_links_labels .rotatorNav .rotatorLink a {
    }

.rotator.nav_links_numbers {
}

    .rotator.nav_links_numbers .rotatorNav .rotatorLink a {
    }

.rotator.nav_links_buttons {
}

    .rotator.nav_links_buttons .rotatorNav .rotatorLink a {
        text-indent: -10000em;
        width: 12px;
        height: 12px;
        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 .rotatorNav {
        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.
*/

/* The page fragment (content) within each rotator element. */

.rotator .rotatorElements .rotatorElement .pageFragment {
}

    .rotator .rotatorElements .rotatorElement .pageFragment .text {
        bottom: 60px;
        padding: 20px 30px;
        margin: 0 14px;
        color: #fff!important;
        background: rgba(24,16,8,0.75);
        border-radius: 10px;
    }

        .rotator .rotatorElements .rotatorElement .pageFragment .text .title {
            font-size: 175%; /* Same as h2 by default. */
            font-weight: normal;
            margin: 0 0 0.5em;
        }

            .rotator .rotatorElements .rotatorElement .pageFragment .text .title a {
                color: #ffffff !important;
            }

        .rotator .rotatorElements .rotatorElement .pageFragment .text .summary {
        }
        
        .rotator .rotatorElements .rotatorElement .pageFragment .text .link {
            padding: 6px 30px 6px 10px;
            margin-top: 10px;
            display: inline-block;
            color: #ffffff !important;
            font-size: 116.7%;
            font-weight: bold;
            background-color: #aa1100;
            background-image: url('/images/cms/icons/white/arrow_right_white_16.png');
            background-repeat: no-repeat;
            background-position: 95% center;
            border: 0;
            border-radius: 6px;
            cursor: pointer;
        }

            .rotator .rotatorElements .rotatorElement .pageFragment .text .link a {
                color: #ffffff !important;
            }

/* 
    Fixed navigation
*/

.rotator.nav_fixed {
}

    .rotator.nav_fixed .rotatorNav {
        width: 37.5%; /* Default. Must match .rotator.nav_fixed .rotatorElements width. Can be set on individual rotators. */
    }

        .rotator.nav_fixed .rotatorNav .rotatorLink {
            font-size: 116.7%; 
        }

            .rotator.nav_fixed .rotatorNav .rotatorLink a {
                padding: 10px;
            }

            .rotator.nav_fixed .rotatorNav .rotatorLink:hover {
                background: #ffffff; 
            }

            .rotator.nav_fixed .rotatorNav .rotatorLink.current {
                background: #f8f4f0;
            }

    .rotator.nav_fixed .rotatorElements {
        width: 62.5%; /* Default. Must match .rotator.nav_fixed .rotatorNav width. Can be set on individual rotators. */
        background: #f8f8f8; 
    }

/* 
    Overlay navigation
*/

.rotator.nav_overlay {
}

    .rotator.nav_overlay .rotatorNav {
    }

        .rotator.nav_overlay .rotatorNav .rotatorLink {
        }

            .rotator.nav_overlay .rotatorNav .rotatorLink a {
                padding:10px 20px;
                margin: 4px;
                background: #ffffff;
                border-radius: 30px;
            }

            .rotator.nav_overlay .rotatorNav .rotatorLink a:hover {
                color: #ffffff;
                background: #783068;
            }

            .rotator.nav_overlay .rotatorNav .rotatorLink.current {
            }

                .rotator.nav_overlay .rotatorNav .rotatorLink.current a {
                color: #ffffff;
                background: #181008;
            }

    /* 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 .rotatorNav .rotatorLink,
    .rotator.nav_overlay.nav_position_leftBottom .rotatorNav .rotatorLink,
    .rotator.nav_overlay.nav_position_rightTop .rotatorNav .rotatorLink,
    .rotator.nav_overlay.nav_position_rightBottom .rotatorNav .rotatorLink,
    .rotator.nav_overlay.nav_position_leftTop .rotatorNav .rotatorLink a,
    .rotator.nav_overlay.nav_position_leftBottom .rotatorNav .rotatorLink a,
    .rotator.nav_overlay.nav_position_rightTop .rotatorNav .rotatorLink a,
    .rotator.nav_overlay.nav_position_rightBottom .rotatorNav .rotatorLink a {
        display: block;
    }
    */

    .rotator.nav_overlay.nav_position_leftTop .rotatorNav {
        top: 10px;
        left: 10px;
    }

    .rotator.nav_overlay.nav_position_leftBottom .rotatorNav {
        bottom: 10px;
        left: 10px;
    }

    .rotator.nav_overlay.nav_position_rightTop .rotatorNav {
        top: 10px;
        right: 10px;
    }

    .rotator.nav_overlay.nav_position_rightBottom .rotatorNav {
        bottom: 10px;
        right: 10px;
    }

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

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

/* 
    Navigation link styles
*/

.rotator.nav_links_labels {
}

    .rotator.nav_links_labels .rotatorNav .rotatorLink a {
    }

.rotator.nav_links_numbers {
}

    .rotator.nav_links_numbers .rotatorNav .rotatorLink a {
    }

    .rotator.nav_links_numbers .rotatorNav .rotatorLink.current a {
        }
        
.rotator.nav_links_buttons {
}

    .rotator.nav_links_buttons .rotatorNav .rotatorLink a {
        width: 12px;
        height: 12px;
        padding: 4px;
        border-radius: 10px;
    }

    .rotator.nav_links_buttons .rotatorNav .rotatorLink.current a {
        }

/* ############################################################################
   ## 
   ##  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: 767px) {

    .rotator {
        max-height: 250px !important;
    }

    .rotator.nav_overlay.nav_links_labels .rotatorElements .rotatorElement .pageFragment .text {
        bottom: 60px;
        margin: 0 10px;
    }

    .rotator.nav_overlay.nav_links_labels .rotatorNav .rotatorLink {
        font-size: 91.7%;
    }

        .rotator.nav_overlay.nav_links_labels .rotatorNav .rotatorLink a {
            margin: 1px;
        }

    .rotator {
    }

        .rotator .rotatorElements .rotatorElement .pageFragment .text .title {
        }

        .rotator .rotatorElements .rotatorElement .pageFragment .text .link a {
        }

}

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

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

}