.bx-wrapper {

	.bx-viewport {
		border: none;
		box-shadow: none;
		left: 0;
	}

	.bx-controls-direction a {
		background: rgba(0,0,0,0.5);
		width: 30px;
		height: 38px;
    	margin-top: -16px;
    	z-index: 500;

		&:after {
			content: '';
			position: absolute;
			width: 12px;
    		height: 12px;
			border-top: 4px solid white;
			border-right: 4px solid white;
			top: 11px;
		}

		&:hover {
			background: rgba(0,0,0,0.8);
		}
	}

	.bx-next:after {
		transform: rotate(45deg);
		left: 4px;
	}
	.bx-prev:after {
		transform: rotate(225deg);
		right: 4px;
	}

	// a smaller version
	.bxslider-wrapper--hero & {
		.bx-controls-direction a {
			@include responsive('>', 'phones', (
				margin-top: -24px,
				width: 44px,
	    		height: 48px
	    	));

			&:after {
				@include responsive('>', 'phones', (
					width: 20px,
					height: 20px,
	    			border-width: 5px
	    		));
			}
		}
	}
}

.bxslider-wrapper {
	margin-bottom: 40px;
}