/* Slider */

.slick-slider
{
    position: relative;

    display: block;

    -moz-box-sizing: border-box;
         box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    
    /* In app.css
    ADDED: bg colour and centered loading gif with a minimum height. 
    The loading gif does not show when an image does not load since the slider is then initialised and therefore the gif removed. 
    But the alternative text is shown. When images are disabled the alt text does not show in most browsers but this is a browser fault. 
    background-image: url(../img/ajax-loader.gif);
	background-repeat: no-repeat;
	background-position: center center;
	min-height: 500px;
	*/
}

/* ADDED: Once the slider is initialised leave bg colour as white. 
.slick-slider.slick-initialized
{
	background-color: #fff;
}
*/

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
	display: block;
	width: 100%; /* ADDED: to stretch over full width of browser. */
	margin-left: auto; /* ADDED: both for centering - just in case. */
	margin-right: auto;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}


/* Dots ADDED*/
.slick-dots { position: absolute; bottom: 30px; list-style: none; display: block; text-align: left; padding: 0px; padding-right: 0px; width: 100%; }
.slick-dots li { position: relative; display: inline-block; height: 15px; width: 15px; margin: 0px 5px; padding: 0px; cursor: pointer; }
.slick-dots li button { border: 0; background: rgb(255, 255, 255); display: block; height: 15px; width: 15px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer; }
.slick-dots li.slick-active button { background: rgb(0, 134, 135); /* GREEN. */ }
ul.slick-dots { margin-bottom: 0; margin: 0 auto; max-width: 75em; width: 100%; }