.bg-black {
   background-color: black;
}
/*--------------
--Swiper
---------------*/
.swiper-caption {
	z-index: 1020;
	display: none;
}
.swiper-button-white {
	background-color: rgba(0, 0, 0, 0.4);
	padding: 30px;
	border-radius: 50%;
}
.swiper-pagination-bullet {
	background: white !important;
}
.swiper-pagination-bullet-active {
	background: white !important;
}
.swiper-pagination {
	
}
.swiper-slide {
	position: relative;
}
.swiper-slide::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 43%;
	background-color: rgba(0,0,0, 0.4);
	z-index: 2;
	-webkit-clip-path: polygon(0% 0%, 75% 0, 100% 100%, 0 100%);
	clip-path: polygon(0% 0%, 75% 0, 100% 100%, 0 100%);

}
.swiper-slide::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 43%;
	background-color: rgba(0,0,0, 0.4);
	z-index: 2;
	-webkit-clip-path: polygon(0% 0%, 100% 0%, 75% 100%, 0% 100%);
	clip-path: polygon(0% 0%, 100% 0%, 75% 100%, 0% 100%);

}

@media only screen and (max-width:992px) {
	.swiper-slide::before {
		right: 25%;
	}
	.swiper-slide::after {
		right: 25%;
	}
	.swiper-img img {
        width: 992px !important;
        height: auto; 
    }
}
@media only screen and (max-width:768px) {
	.swiper-slide::before {
		right: 10%;
	}
	.swiper-slide::after {
		right: 10%;
	}
}
@media only screen and (max-width:576px) {
	.swiper-button-next {
		margin-right: -10px;
	}
	.swiper-button-prev {
		margin-left: -10px;
	}
	.swiper-slide::before {
		right: 0%;
	}
	.swiper-slide::after {
		right: 0%;
	}
}
@media only screen and (max-width:450px) {
	.swiper-slide::before {
		-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	}
	.swiper-slide::after {
		-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	}
}
/*---------------
--Swiper-Overlay
----------------*/

.head {
	position: relative;
	color: var(--light);
        min-height: 230px;
        background-color: #333;
}

.overlay-h {
	position: absolute;
	top: auto;
	bottom: 30%;
	left: 10%;
	right: 50%;
	z-index: 9999;
	max-width: 100%
}

	.overlay-h .lead {
		font-size: 30px;
	}
@media only screen and (max-width: 991px){
.overlay-h {
    bottom: 0;
}
.overlay-h .display-3 {
    font-size:3.4rem;
}
}
@media only screen and (max-width:768px) {
	.overlay-h {
		top: auto;
		bottom: 10%;
		left: 50%;
		right: 0;
		width: 300px;
		max-width: 70%;
		transform: translateX(-50%);
                text-align: center;
	}
}
@media only screen and (max-width:576px) {
	.overlay-h {
		top: auto;
		bottom: 10%;
		left: 50%;
		right: 0;
		width: 300px;
		max-width: 70%;
		transform: translateX(-50%);
	}
	.display-3 {
		font-size: 4rem;
	}
}
/*---------------
--Jumbotron
----------------*/

.jumbotron {
        background-color: #333;
	background-image: url('site/hero-d.jpg');
	background-size: cover;
	background-position: center top;
	min-height: 50px;
	margin: 0;
	border-radius: 0;
	padding: 2rem 2rem;
}

.j-h1 {
	text-align: center;
	background-color: rgba(0, 0, 0, 0.4);
	padding: 1rem 2rem;
}

@media only screen and (max-width: 992px){
	.jumbotron {
		background-size: cover;
		height: auto;
                padding: 1rem 2rem;
	}
        .jumbotron .display-4 {
	        font-size: 2.5rem;
        }
}

/*---------------
--Navbar
---------------*/

.navbar {
	border-bottom: var(--dark) thin solid;
}

.navbar-brand img {
	width: 100px;
	max-width: 100%;
}

.dropdown-menu ul {
	padding: 0;
	margin: 0;
}

/*------------
--Footer
-------------*/

.foot li {
	list-style: none;
        padding: 10px 0;
        border-bottom: thin solid var(--light);
}
.foot li a {
        display:block;
}
.foot a {
	color: var(--light);
}
	.foot a:hover {
		color: var(--light);
		opacity: 0.7;
	}
.foot .fab {
      font-size: 30px;
}
.foot .library-image {
	margin: 0;
}