.metaslider.ms-theme-social-play {
	
	&:not(.nav-hidden) {
		.flexslider {
			margin-bottom: 50px;
		}
	}

	&.nav-hidden {

		.flexslider {
			margin-bottom: 10px;
		}
	}

    .flexslider {

		.slides > li {
			border-radius: 10px;
			overflow: hidden;
		}
	}

	.caption-wrap {
		background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.8));
		opacity: 1 !important;
		bottom: 0;
		transform: translateY(0);

		.caption {
			text-align: center;
			  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
			padding: 50px 20px 20px;

			p {
				margin: 0 0 15px;
			}

			a {
				color: #fff;
				font-weight: bold;

				&:focus,
				&:hover {
					color: #fff;
					  text-decoration: underline;
				}
			}
		}
	}

	.flex-control-nav {
		bottom: -35px;		

		li {

			a {
				transition: all .3s ease;
				width: 18px;
				height: 18px;

				&.flex-active {
					width: 30px;
				}
			}
		}
	}

	.flex-direction-nav li a {
		background-color: #fff;
		background-position: center;
		width: 50px;
		height: 50px;
		background-image: none;
		border-radius: 50%;
		box-shadow: 0px 1px 5px rgba(0,0,0,0.3) !important;
		top: calc(50% + 20px);
		transform: translateY(-50%);

		&:after {
			background-image: none;
			background-color: #65676B;
			mask-image: url(images/arrow.svg);
			mask-repeat: no-repeat;
			mask-position: center;
			mask-size: 15px auto;
			content: '' !important;
			display: block;
			height: 100%;
			width: 100%;
			top: 0;
			position: absolute;
		}

		&.flex-prev {
			left: -25px;
		}

		&.flex-next {
			right: -25px;

			&:after {
				transform: rotate(180deg);
			}
		}
	}

	ol.flex-control-thumbs img {
		border-radius: 10px;
	}

	&.has-onhover-arrows {
		.flex-direction-nav li {
			opacity: 0;
		}
		&:hover {
			.flex-direction-nav {
				li {
					opacity: 1;
				}
				a {
					opacity: 1;
				}
			}
		}
	}
}