/* Flickity Sliders
--------------------------------------------- */
.carousel-home .carousel-cell {
	position: relative;
	margin: 0px;
	height: 500px; 
	width: 25%;
	background-size: cover !important;
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-o-background-size: cover !important;
	border: 0px;
	z-index: 9;
}
@media only screen and (max-width: 1000px) {
	.carousel-home .carousel-cell {width: 45%;}
}

.carousel-home .over {
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: block;
    margin: auto;
    width: 100%;
}

.carousel-home a {
    text-decoration: none;
    position: relative;
    display: inline-block;
    width: 80%;
    color: var(--white);
    margin: auto;
    text-align: center;
}

.carousel-home a:visited, .carousel-home a:focus {color: var(--white);}

.carousel-home a:after {
	background-color: var(--white);
	content: '';
	position: absolute;
	width: 2.5rem;
	display: inline;
	right: 0rem;
	top: 50%;
	height: 1px;
	margin: auto;
}

.project-carousel .flickity-prev-next-button,
.carousel-home .flickity-prev-next-button {
    top: unset;
    width: 150px;
    height: 80px;
    border-radius: 0px;
    transform: translateY(-50%);
}

.project-carousel .flickity-button,
.carousel-home .flickity-button {
    position: absolute;
    background: var(--black);
    border: none;
    color: var(--white);
    padding: 2rem 1rem;
}

.project-carousel .flickity-button {bottom: -150px;}

.carousel-home .flickity-prev-next-button.previous {
    left: 38%;
}

.project-carousel .flickity-prev-next-button.previous {
    left: unset;
    right: 15.5%;
}


.carousel-home .flickity-prev-next-button.next {
    right: unset;
    left: 48%;
}

.project-carousel .flickity-prev-next-button.next {
	right: 5.5%;
}

.project-carousel .flickity-prev-next-button.previous:hover,
.project-carousel .flickity-prev-next-button.next:hover,
.carousel-home .flickity-prev-next-button.previous:hover,
.carousel-home .flickity-prev-next-button.next:hover {background: var(--black);}

#more-projects {
	width: 100%;
	position: relative;
	display: inline-block;
	padding: 0rem 0rem 6rem 6rem;
}

.post-slider {
	list-style: none;
	margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
}

.project-carousel {
	list-style: none;
	margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
    padding-left: 6rem;
}

.project-carousel li {
	width: 46%;
	margin-right: 2%;
}

.post-slider li {
	width: 27%;
	margin-right: 2%;
}

.post-slider .featured-image {
	width: 100%;
	height: 60vh;
	background-size: cover !important;
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-o-background-size: cover !important;
}

.post-slider .text-container a, 
.text-container a:visited, 
.text-container a:focus {text-decoration: none;}

@media only screen and (max-width: 896px) {
	.carousel-home .flickity-prev-next-button.previous {left: 36%;}
	.carousel-home .flickity-prev-next-button.next {left: 52%;}
}

@media only screen and (max-width: 820px) {
	.project-carousel .flickity-button {bottom: -77px;}
	.post-slider li {
		width: 33%;
		margin-right: 2%;
	}
	.post-slider .featured-image {height: 300px;}
	#more-projects {padding: 0rem 0rem 6rem 2rem;}
}

@media only screen and (max-width: 696px) {
	.carousel-home .flickity-prev-next-button.previous {left: 28%;}
	.carousel-home .flickity-prev-next-button.next {left: 49%;}
	.post-slider li {
		width: 55%;
		margin-right: 2%;
	}
}

@media only screen and (max-width: 800px) {
	.project-carousel {padding: 0rem 0rem 0rem 0rem;}
	
	.project-carousel li {
		width: 75%;
		margin-right: 2%;
	}
}

@media only screen and (max-width: 783px) {
	.project-carousel .flickity-prev-next-button.previous {
    left: unset;
    right: 24.5%;
	}
}

@media only screen and (max-width: 456px) {
	.post-slider li {
		width: 70%;
		margin-right: 2%;
	}
	
	.project-carousel .flickity-prev-next-button,
	.carousel-home .flickity-prev-next-button {
    	top: unset;
		width: 75px;
		height: 40px;
		border-radius: 0px;
		transform: translateY(-50%);
	}
	
	.project-carousel .flickity-button {
    	bottom: -59px;
	}

	.project-carousel .flickity-prev-next-button.previous {
    	left: unset;
		right: 27%;
	}
	
	.carousel-home .flickity-prev-next-button.previous {left: 33.2%;}
	.carousel-home .flickity-prev-next-button.next {right: 33.2%; left: unset;}
}

@media only screen and (max-width: 371px) {
	.carousel-home .flickity-prev-next-button.previous {left: 30%;}
	.carousel-home .flickity-prev-next-button.next {right: 30%; left: unset;}
}

@media only screen and (max-width: 330px) {
	.carousel-home .flickity-prev-next-button.previous {left: 28%;}
	.carousel-home .flickity-prev-next-button.next {right: 28%; left: unset;}
}