.slider-container {
    /* max-width: 1000px; */
    /* padding: 2rem 3rem; */
    /* background: #e6e6e6; */
    margin: 0 auto 0 auto;
    overflow: hidden;
    /* border-radius: 5px; */
    position:relative;
    &:before {
        content: '.slider-container';
        position: absolute;
        left: 0;
        top: 0;
        color: blue;
    }
}
.slider-container:hover .controls {
	opacity: 1;
}

/*
img {
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
}
*/

.my-slider {
    position: relative;
	height: 650px;
}

.slider-item {
	text-align: center;
	min-height: 650px;
    /* background: grey; */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
    /* border-right: 2px solid #333; */
    padding: 1.5rem .75rem;
    /* border-radius: 5px; */
    position: relative;
    &:before {
        content: '.slider-item';
        position: absolute;
        left: 0;
        top: 0;
        color: blue;
    }
    
    &:hover {
        cursor: pointer;
    }
}


.fas {
	color: white;
}

.controls {
	font-size: xx-large;
    margin: 0;
    padding: 0 2rem;
    list-style: none;
    position: absolute;
    left: 0;
    /* background: #333; */
	opacity: 0;
    width: 100%;
    top: 50%;
    transform: translatey(-50%);
	z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
	transition: opacity 0.4s;

    &:focus {
        outline: none;
    }

    li:hover {
        cursor: pointer;
    }
}
.controls li {
	cursor: pointer;
}
.controls:hover {
	opacity: 1;
}


.card {
    text-align: center;
    margin: 0 auto;
    width: 80%;
    /* color: #333;	*/
    color: white;
    background-color: rgba(0, 0, 0, 0.8);
    /* border-radius: 5px; */
    padding-bottom: .75rem;
    overflow: hidden;
    box-shadow: 2px 2px rgba(black, .3);
    /* position: relative;	 */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
    &:before {
        content: '.card';
        position: absolute;
        bottom: 0;
        color: blue;
    }
	
    img {
        margin-bottom: .25rem;
    }
    
    h2 {
        margin: 0 0 .25rem;
    }
    p {
        margin: 0;
		color: white;
        padding: 0 1.5rem;
    }
}

.card_title {
	padding: 11px;
}
.card_description {
	font-size: 16px;
	margin: 40px;
	color: white;
	padding: 0 1.5rem;
}

.backgroundImage {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: -1;
	width: 100%;
	height: 100%;
	/* filter: blur(2px); */
	/* -webkit-filter: blur(2px); */
	
}