/**
 * @package    hubzero-cms
 * @copyright  Copyright (c) 2005-2020 The Regents of the University of California.
 * @license    http://opensource.org/licenses/MIT MIT
 */

/*

	-- -- -- -- -- -- --
	mod_billboard
	-- -- -- -- -- -- --

*/

/* Container Styling */
	.slider {
		position: relative;
		background: #EEEEEE;
	}
	.banner,
	.slide {
		position: relative;
		min-height: 500px;
		height: fit-content;
		width: 100%;
		background-position: center;
		background-size: cover;
		background-color: #000;
	}
	.slide-overlay {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: #000;
		opacity: 50%;
		z-index: 0;
	}
	.slide-content {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 500;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 30px;
	}
	.banner div {
		width: 100%;
	}

/* Standard Pager Styling */
	.slider .pager {
		z-index: 500;
		position: absolute;
		top: 20px;
		right: 20px;
	}
	.slider .pager a {
		float: left;
		text-indent: -555em;
		background: #CCCCCC;
		width: 9px;
		height: 9px;
		-webkit-border-radius: 4px;
		   -moz-border-radius: 4px;
		        border-radius: 4px;
		opacity: 0.5;
		margin-right: 4px;
	}
	.slider .pager a:hover {
		border: none;
		opacity: 0.7;
	}

/* Standard billboard styling (could override here, or on a per-billboard basis) */
	/* .slide {
		background-repeat: repeat;
	} */
	.slide * {
		color: #fff;
	}
	.slide h3 {
		font-size: 200%;
		font-weight: 500;
		color: #ffffff;
		margin: 0.7em 0;
	}
	.slide p {
		font-size: 1.2em;
	}

/* Standard Learn more link styling */
	.slide a.learnmore {
		background: #555;
		color: #fff;
		padding: 5px 15px;
		-webkit-border-radius: 10px;
		   -moz-border-radius: 10px;
		        border-radius: 10px;
		text-shadow: none;
	}
	.slide a:hover.learnmore {
		border-bottom: none;
		background: #777;
	}
	.slide div .learnmore {
		font-size: 1em;
	}
	.slide .relative {
		margin-top: 15px;
		font-size: 1em;
	}
	.slide .bottomright {
		position: absolute;
		right: 15px;
		bottom: 15px;
		width: 100px;
	}
	.slide .bottomleft {
		position: absolute;
		left: 15px;
		bottom: 15px;
	}
	.slide .topright {
		position: absolute;
		right: 15px;
		top: 15px;
		width: 100px;
	}
	.slide .topleft {
		position: absolute;
		left: 15px;
		top: 15px;
	}
/* Custom CTA button styling */
	.slide .button {
		background-color: #dd861e;
		border: none;
		color: white;
		padding: 15px 32px;
		text-align: center;
		text-decoration: none;
		font-size: 16px;
		margin: 4px 2px;
		cursor: pointer;
 	}