.block-carousel {
	margin: 30px auto;
	max-width: 100%;
	width: 100%;

	h2 {
		color: #fff;
		font-size: 30px;
	    font-weight: 300;
	    font-family: $secondary-font;
		line-height: 1.15;
	    padding: 60px 30px 0;
		width: 1400px;
	    margin: 0 auto 15px;
	    max-width: 100%;
	}

	.slide {
		width:1400px;
		max-width: 100%;
   	 	margin: 0 auto;
   	 	min-height: 375px;
   	 	display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px 30px 90px;

		.media {
			width: 350px;
    		height: 350px;

    		img {
    			width: 100%;
    			height: 100%;
    			object-fit: cover;
    		}
		}
		&.has-video .media {
			position: relative;
			cursor: pointer;

			&:after {
				content: "";
				background: url('images/white-play-icon.png') center / cover no-repeat;
				position: absolute;
				bottom: 15px;
				left: 15px;
				width: 40px;
				height: 40px;
			}
		}
	
		.text {
		    width: calc(100% - 350px);
		    padding-left: 75px;
		    color: #fff;

		    .quote {
		    	display: block;
			    padding-top: 40px;
			    margin-bottom: 25px;
			    color: inherit;
			    font-size: 16px;

			    &:before {
			    	color: #fff;
				    line-height: 0;
				    padding: 0 0 25px 5px;
			    }
		    }
		    .attribution {
		    	margin-top: 20px;
		    	font-size: 14px;
		    	color: inherit;
		    }
		}
	}
	.slick-carousel {
		position: relative;

		.slick-prev, .slick-next {
			position: absolute;
			height: 60px;
		    width: 30px;
		    left: 25px;  
		    top: 50%; 
		    transform: translateY(-100%);
		    cursor: pointer;
		    text-align: center;
		    z-index: 900;
		    outline: none;
			border: none;
			background: url('/wp-content/themes/fulbright/images/arrow-white-back.png') center / contain no-repeat transparent;
			color: transparent;
			border: none;
		}
		.slick-next {
			left: auto;
			right: 25px;
			background: url('/wp-content/themes/fulbright/images/arrow-white-next.png') center / contain no-repeat transparent;
		}
	}

	@media (max-width: 1440px) {
		.slick-carousel {
			.slick-prev {
				left: 10px;
			}
			.slick-next {
				left: auto;
				right: 10px;
			}
			.slide {
				padding-left: 60px;
				padding-right: 60px;
			}
		}
	}

	@media (max-width: 900px) {
		.slick-carousel {
			.slide {
				display: block;
				padding-left: 30px;
				padding-right: 30px;

				.media, .text {
					width: 100%;
					padding: 0;
				}
				.media {
					padding-bottom: 30px;

					img {
						max-width: 100%;
						width: auto;
						margin: 0 auto;
						display: flex;
						position: relative;
					}
					&:after {
						width: 30px;
						height: 30px;
						left: calc(50% - 150px);
						bottom: 40px;
					}
				}
			}
			.slick-prev, .slick-next {
				top: 25%;
				width: 20px;
				height: 35px;
			}
		}
	}
}