FlexSlider Arrows working but not visible

Question

I tried following advice about this issue from other chat rooms but with no luck. I am using Unbounce and I copied all codes from one old landing page to a new one. Everything works except the arrows are not visible (yet they are clickable, they work).

All I managed to do so far was removing the frame around the arrows.

Any idea what could be wrong?

Link to the new LP

Link to the old LP with working Flexslider

<style>
a {
  text-decoration: none !important;
}
 
/*Testimonials slider*/
.testimonial-container {
  background-color: transparent;
  width: 100%;
}

.cd-testimonials-wrapper {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	background-color: transparent;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding: 25px 0px 40px 0;
	z-index: 1;
}

.testimonial-content {
	max-width: 1000px;
	width: 80%;
	margin: 0 auto 30px auto;
}

.cd-testimonials {
	color: rgba(130, 132, 139, 1);
	text-align: center;
	list-style: none;
	padding: 0;
	margin: 0;
}

.cd-testimonials > li {
	position: absolute;
	opacity: 0;
  	font-family: 'Fira Sans', sans-serif;
}

.cd-testimonials > li:first-child {
	position: relative;
	opacity: 1;
}

.testimonial-content p {
	font-style: italic;
	line-height: 1.4;
	margin-bottom: 30px;
	padding: 0 14px;
  	font-size: 19px;
  	color: #284A6A;
}

.cd-author .cd-author-info {
	display: inline-block;
	vertical-align: top;
  	color: #0058A9;
  	font-size: 16px;
  	font-weight: 500;
 	text-align: center;
	line-height: 1
}

ul.cd-author-info {
	list-style: none;
  
}

ul.cd-author-info li span {
	font-size: 14px;
	line-height: 32px;
	font-style: italic;
	font-weight: 300;
  	color: #9c9c9c;
}

.flex-direction-nav a {
	text-decoration: none;
	display: block;
	width: 50px;
	height: 100%;
	margin: 0px 0 0;
	position: absolute;
	z-index: 9999;
	top: 0;
	opacity: 1;
	background: transparent;
	cursor: default;
	color: transparent;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.flex-direction-nav a:before {
	font-size: 52px;
	font-family: Arial;
   	content: "\f053";
	position: absolute;
	display: block;
	top: 50%;
  	cursor: pointer;
  	color: transparent;
	padding: 14px 10px 14px 10px;
  
}

.flex-direction-nav a.flex-next:before {
	content: "\f054";
	padding: 14px 20px 14px 10px;
}

.flex-direction-nav .flex-prev {
	left: 0px;
}

.flex-direction-nav .flex-next {
	right: 0px;
	text-align: right;
}

.flexslider:hover .flex-direction-nav .flex-prev {
	opacity: 1;
	left: 0px;
}

.flexslider:hover .flex-direction-nav .flex-prev:hover {
	opacity: 1;
}

.flexslider:hover .flex-direction-nav .flex-next {
	opacity: 1;
	right: 0px;
}

.flexslider:hover .flex-direction-nav .flex-next:hover {
	opacity: 1;
}

.flex-direction-nav .flex-disabled {
	opacity: 0!important;
	filter: alpha(opacity=0);
	cursor: default;
}

.flex-control-paging li a {
	width: 6px;
	height: 6px;
	display: block;
	background: #666;
	background: rgba(0, 0, 0, 0.4);
	cursor: pointer;
	text-indent: -9999px;
	-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
	-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
	box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

.flex-control-paging li a:hover {
	background: #333;
	background: rgba(0, 0, 0, 0.7);
}

.flex-control-paging li a.flex-active {
	background: #000;
	background: rgba(2, 23, 31, 1);
	cursor: default;
}

.flex-control-nav {
	bottom: 30px;
	position: absolute;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	width: 100%;
}

.flex-control-nav li {
	display: inline-block;
	padding: 0px 5px 0px 5px;
}
    
/*Footer icons custom style*/
.footer-icons {
    text-align: left;
  }
.footer-icons a {
    margin-right: 10px;
    color: #fff;
}

@media screen and (max-width: 767px) {
  	.cd-author .cd-author-info {
		line-height: 1.4;
	}
	.cd-author .cd-author-info {
		font-size: 16px;
	}
  	.testimonial-content p {
		font-size: 16px;
	}
	.flex-direction-nav a {
		width: 30px;
	}
	.flex-direction-nav a:before {
		font-size: 30px;
	}
	.flex-direction-nav a:before {
		padding: 14px 0px 10px 0px;
	}
	.flex-direction-nav .flex-prev {
		left: 0px;
	}
	.flex-direction-nav .flex-next {
		right: 0px;
		text-align: right;
	}
	.flexslider:hover .flex-direction-nav .flex-prev {
		opacity: 1;
		left: 0px;
	}
	.flexslider:hover .flex-direction-nav .flex-prev:hover {
		opacity: 1;
	}
	.flexslider:hover .flex-direction-nav .flex-next {
		opacity: 1;
		right: 0px;
	}
} 
</style>

Answer 1

You lose Font Awesome css, which is required as the nav arrow.

add

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to <head> section. (Just as the working page does, check it's source code line 2825). Good luck.