﻿/*	===================== ===================== ===================== ===================== ===================== 
	STUDIO X ADVERTISES SLIDER
	===================== ===================== ===================== ===================== ===================== */
/*	===================== ===================== ===================== ===================== 	
	0. SLIDER WRAPPER AND GENERAL STYLES
	===================== ===================== ===================== ===================== 
*/
.sxAds_Slider {
	position: relative;
	clear: both;
	margin: 0 0 80px 0;
	padding: 0;
	background: #fff;
	border: 0;
	box-shadow: none;
	border-top: 4px solid #3399dd;
}

.sxAds_Slider ul,
.sxAds_Slider li {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 100%;
}

/*	===================== ===================== ===================== ===================== 	
	1. THE PHOTO SLIDER ELEMENTS
	===================== ===================== ===================== ===================== 
    position: absolute;
*/
.sxAds_Slider ul {
	position: relative;
	overflow: hidden;
}

.sxAds_Slider li {
	position: absolute;
	left: 0; top: 0; right: 0;  bottom: 0;
	display: none;
	background: #f3f3f3;
	z-index: 2;
}
.sxAds_Slider li:first-child {
	position: static !important;
	display: block !important;
	visibility: visible !important;
	padding: 5px 0 20px 0;
	z-index: 1;
}

.sxAds_Slider li>div {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	flex-wrap: nowrap;
	justify-content: space-around;
	flex: 1;
	padding-top: 10px;
}
.sxAds_Slider li div div {
	padding: 0 1px;
}
.sxAds_Slider li a {
	display: block;
	width: 100%;
}
.sxAds_Slider li img {
	max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
	padding: 0;
}


/*	===================== ===================== ===================== ===================== 
	2. THE PHOTO NOTE ELEMENTS - CONTAINS h1, h2 AND a
===================== ===================== ===================== ===================== */
.sxAds_Slider p {
    position: absolute;
    left: 0;
    top: 100%;
    right: 0;
	margin: 0;
	padding: 8px 20px;
	font-weight: bold;
    text-align: center;
	line-height: 100%;
	background: #3399dd;
	color: rgba(255,255,255,0.6);
}

.sxAds_Slider p a {
	color: rgba(255,255,255,0.8);
	font-size: 0.9em; 
    padding: 5px 0;
}
.sxAds_Slider p a:hover {
	color: rgba(0,0,0,0.65);
}

/*	===================== ===================== ===================== ===================== 
	5. THREE CONTROLLERS - PREVIOUS and NEXT SLIDE - SHOW/HIDE NOTES; 
===================== ===================== ===================== ===================== */
.sxAds_Slider .previous,
.sxAds_Slider .next {
	position: absolute;
	display: none;
	top: 98%;
	width: 2em;
	height: 1.5em;
	cursor: pointer;
	background: transparent;
	color: #fff;
	font-size: 1.5em;
	text-align: center;
	opacity: 0.6;
	z-index: 400;
}

.sxAds_Slider .previous {left: 4px;}
.sxAds_Slider .next {right: 4px;}

.sxAds_Slider .previous::before {content: "\276E"; position: absolute; top: 8px; left: 4px; text-shadow: 3px 3px 5px #000000;}
.sxAds_Slider .next::before {content: "\276F"; position: absolute; top: 8px; right: 4px; text-shadow: -3px 3px 5px #000000;}

.sxAds_Slider .previous:hover,
.sxAds_Slider .next:hover {
	opacity: 1;
}


/*	end
******************************/