/*
 nivo-slider/themes/default/otp_default.css v21.0 15.01.2021

Note that this .css file is the second nivo css file to be loaded; therefore styles in here override styles in otp_nivo-slider.css

v20.0 Original with caption font size set
v20.1 Media query introduced to control caption font size at small screen widths
v21.0 Adjust thumbs display to fit across smaller mobile screens without breaking 
- make container into flex and use 'justify-content:space-between' to fit - NOTE: changed to 'center' so lesser numbers of pics display corrrectly

*/

/*
Skin Name: Nivo Slider Default Theme
Skin URI: http://nivo.dev7studios.com
Description: The default skin for the Nivo Slider.
Version: 1.3
Author: Gilbert Pellegrom
Author URI: http://dev7studios.com
Supports Thumbs: true
*/

.theme-default .nivoSlider {
	position:relative;
	background:#fff url(/nivo-slider/themes/default/loading.gif) no-repeat 50% 50%;
    margin-bottom:10px;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
}

.theme-default .nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}

.theme-default .nivoSlider a {
	border:0;
	display:block;
}

.theme-default .nivo-controlNav {
	text-align: center;
	padding: 20px 0;
}

.theme-default .nivo-controlNav a {
	display:inline-block;
	width:22px;
	height:22px;
	background: url(/nivo-slider/themes/default/bullets.png) no-repeat;
	text-indent:-9999px;
	border:0;
	margin: 0 2px;
}

.theme-default .nivo-controlNav a.active {
	background-position:0 -22px;
}

.theme-default .nivo-directionNav a {
	display:block;
	width:30px;
	height:30px;
	background-image:url(/nivo-slider/themes/default/arrows.png);
	background-repeat: no-repeat; 
	/*background-color:#00FF00;*/
	color:#FF0000;
	/*background: url("/nivo-slider/themes/default/arrows.png") no-repeat;*/
	text-indent:-9999px;
	border:0;
	/*border:1px solid magenta;*/
	opacity: 0;
	-webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

.theme-default:hover .nivo-directionNav a { 
	opacity: 1; 
	}
	
.theme-default a.nivo-nextNav {
	background-position:-30px 0;
	right:15px;
}

.theme-default a.nivo-prevNav {
	left:15px;
}



.theme-default .nivo-caption {
    /*font-family: Helvetica, Arial, sans-serif;*/
	font-family:Verdana, Arial, Helvetica, sans-serif; /* OTP */
	font-size:1.1em; /* For small width screens */
}
@media only screen and (min-width: 400px) { /* Styling mods for wider screen widths down to 799px */
.theme-default .nivo-caption {
    /*font-family: Helvetica, Arial, sans-serif;*/
	font-family:Verdana, Arial, Helvetica, sans-serif; /* OTP */
	font-size:1.6em; /* me */
    }
}

.theme-default .nivo-caption a {
    color:#fff;
    border-bottom:1px dotted #fff;
}

.theme-default .nivo-caption a:hover {
    color:#fff;
}

.theme-default .nivo-controlNav.nivo-thumbs-enabled {
	position:relative; /* me */
	display: inline-block; /* me */
    display:flex;
    /*justify-content:space-between;*/
    justify-content:center;
	width: 100%;
	/*width: 5%;*/ /* me */
	/*text-align: center;*/ /* me */
	padding:0; /* me */
    /*border:1px solid yellow;*/ /* me */ /* DEV only */
}

.theme-default .nivo-controlNav.nivo-thumbs-enabled a {
	width: auto;
	width: 8%;
	height: auto;
	background: none;
	margin:0px; /* me */
	margin-bottom: 5px;
	margin-right:5px; /* me */	
	border-bottom:1px solid #000000; /* to prevent movement when hovering */
}
/* Added 21.03.2020 - PC */
.theme-default .nivo-controlNav.nivo-thumbs-enabled a:active, /* doesn't add to the party */
.theme-default .nivo-controlNav.nivo-thumbs-enabled a:hover,
.theme-default .nivo-controlNav.nivo-thumbs-enabled a:focus {
	border-bottom:1px solid #ffffff;	
}

.theme-default .nivo-controlNav.nivo-thumbs-enabled img {
	/*position:relative;*/ /* me*/
	/*position:absolute;*/ /* me*/
	/*top: 200px;*/ /* me */
	display: block;
	/*display: inline;*/ /* me */
	/*display:inline-block;*/ /* me */
	/*float:left;*/ /* me */
	width: 120px;
	width: 100%;
	/*width: 9%;*/ /* me */
	height: auto;
}

/* Experiment to get thumbnails to highlight as images rotate */
/* From stackoverflow/questions/8044681/how-do-i-style-the-nivo-slider-thumbnails */

.nivo-controlNav img {
   /* z-index:11;*/
}

a.active img {
    border-bottom:1px solid #ffffff; /* The key bit, it seems */
    }

.nivo-controlNav a:active {
   /* opacity:1;
    z-index:10;*/
}