hs slider scss

slider.scss

@import '../variables';

.slider-with-header {
	.max-width-container {
		@include breakpoint(desktopwideup) {
			max-width: 1200px;
		}
	}
	.flexslider {
		float: left;
		position: relative;
		> ol {
			display: none;
		}
		.flex-direction-nav {
			display: none;

			@include breakpoint(phoneup) {
				display: block;
				position: absolute;
				top: 250px;
				width: 100%;
				left: 0;
				right: 0;
				list-style: none;
				margin: -30px 0 0;
				padding: 0;
				height: 100px;
			}
			@include breakpoint(tabletup) {
				top: 50%;
				margin-top: -30px;

			}

			li {
				position: absolute;
				z-index: 12;
				top: 0;
				width: 25px;
				height: 48px;
				line-height: 1;
				font-size: 45px;
				a {
					height: 48px;
					width: 25px;
					margin: 0;
					padding: 10px;
					cursor: pointer;
					display: block;
					position: absolute;
					top: -5px;
					z-index: 13;
				}
				&:before {
					color: $black;
					font-family: "FontAwesome";
				}
				&.flex-nav-prev {
					text-align: left;
					left: 0;
					&:before {
						content: '\f053';
					}
				}
				&.flex-nav-next {
					text-align: right;
					right: 0;
					&:before {
						content: '\f054';
					}
				}
			}
		}
		.slides {
			margin-left: -40px;
			list-style: none;
			@include breakpoint(tabletup) {
				margin-left: 0;
			}
			.slide {
				position: relative;
				background-repeat: no-repeat;
				background-size: cover;
				text-align: center;
				@include breakpoint(tabletup) {
					text-align: left;
				}

				img {
					max-width: 90%;
					@include breakpoint(tabletup) {
						max-width: 85%;
					}

					// visibility: 0!important;
				}
				.testimonial-content {
					background-color: $blue;
					padding: 20px;
					text-align: center;
					position: relative;
					@include breakpoint(tabletup) {
						position: absolute;
						top: 30px;
						right: 40px;
						width: 30%;
						min-height: 65%;

					}

					.testimonial-quote-icon {
						position: absolute;
						width: 50px;
						height: 50px;
						right: 0;
						top: -30px;
						@include breakpoint(tabletup) {
							width: 150px;
						    height: 150px;
						    top: -75px;
						    right: -40px;
						}

					}
					.testimonial-quote {
						max-width: 80%;
						margin: 20px auto 0;
						font-size: 20px;
						line-height: 1.2;
						font-weight: 400;
						color: $white;
						padding-bottom: 30px;


						@include breakpoint(tabletup) {
							font-weight: 400;
							margin: 40px auto 0;
						}
						@include breakpoint(desktopup) {
							font-weight: 700;
							font-size: 28px;
							margin: 80px auto 0;
						}

					}
					.testimonial-name {
						color: $white;

					}
					.logo-container {
						padding-top: 15px;
						text-align: center;
						img {
							display: inline-block;
							margin: 0 auto;
							max-width: 100%;
							height: auto;
						}
					}
				}
			}
		}
	}
	.logo-container {
		padding: 75px 0 40px;
		ul {
			margin: 0;
			padding: 0;
			list-style: none;
			text-align: center;
			li {
				padding: 15px;
				display: inline-block;
				img {

				}
			}
		}
		.cta-center {
			padding-top: 55px;
			width: 100%;
			text-align: center;

		}
	}
	// .flex-direction-nav li {
	// 	position: absolute;
	// 	height: 100%;
	// 	width: 40px;
	// 	top: 0;
	// }
	//
	// .flex-direction-nav li:first-child {
	// 	left: 0;
	// }
	//
	// .flex-direction-nav li:last-child {
	// 	right: 0;
	// }
	//
	// .flex-direction-nav li a {
	// 	display: block;
	// 	height: 100%;
	// 	width: 100%;
	// 	/* image replacement */
	// 	overflow: hidden;
	// 	text-indent: 100%;
	// 	white-space: nowrap;
	// 	transition: background-color 0.2s;
	// }
	//
	// .flex-direction-nav li a::after,
	// .flex-direction-nav li a::before {
	// 	/* left and right arrows in css only */
	// 	content: '';
	// 	position: absolute;
	// 	left: 50%;
	// 	top: 50%;
	// 	width: 2px;
	// 	height: 13px;
	// 	background-color: white;
	// }
	//
	// .flex-direction-nav li a::before {
	// 	transform: translateY(-35px) rotate(45deg);
	// }
	//
	// .flex-direction-nav li a::after {
	// 	transform: translateY(-27px) rotate(-45deg);
	// }
	//
	// .flex-direction-nav li:last-child a::before {
	// 	transform: translateY(-35px) rotate(-45deg);
	// }
	//
	// .flex-direction-nav li:last-child a::after {
	// 	transform: translateY(-27px) rotate(45deg);
	// }
}