.slider {
margin: 0 auto;
max-width: 100%;
}

.slide_viewer {
overflow: hidden;
position: relative;
}

.slide_group {
height: 100%;
position: relative;
width: 100%;
}

.slide {
display: none;
height: 100%;
position: absolute;
width: 100%;
}

.slide:first-child {
display: block;
}

.slide_buttons {
left: 0;
position: absolute;
right: 0;
text-align: center;
background: rgba(123, 123, 123,0.5);
}

a.slide_btn {
color: #333333;
font-size: 42px;
margin: 0 0.175em;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.slide_btn.active, .slide_btn:hover {
color: #0ea5ed;
cursor: pointer;

}

.directional_nav {
height: 80px;
margin: 0 auto;
position: relative;
top: -340px;
}

.previous_btn {
bottom: 0;
left: 10px;
margin: auto;
position: absolute;
top: 0;
}

.next_btn {
bottom: 0;
margin: auto;
position: absolute;
right: 10px;
top: 0;
}

.previous_btn, .next_btn {
cursor: pointer;
height: 65px;
opacity: 0.5;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
width: 65px;
}

.previous_btn:hover, .next_btn:hover {
opacity: 1;
background: rgba(0,0,0,0.5);
}

@media only screen and (max-width: 767px) {
.previous_btn {
left: 50px;
}

.next_btn {
right: 50px;
}
}