.flex-caption {
position:absolute;
left:50;
right:50;
bottom:10px;
_background:rgba(0, 0, 0,0.8);
z-index:999 !important;
padding:10px;
color:#fff;
font-family:'Titillium Web',Verdana,Geneva,sans-serif;
font-weight: normal;
}


/* Alternate Caption CSS */
#flex-main { font-family: 'Open Sans', sans-serif; padding: 0 40px; max-width: 1200px; margin: 0 auto; }
.flex-caption { max-width: 1600px; margin: 0 auto; position: absolute; bottom: 5%; z-index: 100;  }
.caption-container { position: relative; width: 100%; margin: 0 auto; padding-left: 5%; }
.text-container { max-width: 650px; position: relative;}
.text-container a:hover { text-decoration: underline; }
.caption-1 h1 { background:none; color: white; font-size:24px;    font-family: "Titillium Web", sans-serif; line-height:38px; text-shadow: 2px 2px 2px #000000; font-weight:700; margin:0; padding:0; text-align:right }
.caption-one h1 { background:rgba(0,0,0,0.5); color: white; font-size:28px;    font-family: "Gafata", sans-serif; line-height:32px; text-shadow: 2px 2px 2px #000000; font-weight:700; margin:0; padding:10px 20px }
.caption-one p { background:none; color: white; font-size:20px;  font-family: "Gafata", sans-serif; line-height:22px; text-shadow: 2px 2px 2px #000000; margin-top:15px; padding-top:0 }
.caption-one a { color: white; font-size:13px; padding:2px 15px 5px 7px;  font-family: "Gafata", sans-serif; font-weight:400; background:rgba(11,135,162,.9) url(../images/style-arrow2.png) right 8px no-repeat; text-decoration:none; margin-left:0}
.caption-one a:hover{ color: white; font-size:13px; padding:2px 15px 5px 7px;  font-family: "Gafata", sans-serif; font-weight:400; background:rgba(11,135,162,.8) url(../images/style-arrow2.png) right 8px no-repeat; text-decoration:none}
.caption-two { background-color: #056652; color: white; }
.caption-two a { color: white; }
.caption-three { background-color: #8c4200; color: white; }
.caption-three a { color: white; }
.caption-four { background-color: #6a2307; color: white; }
.caption-four a { color: white; }

/* 860px and above CSS of Alternate Caption */
@media screen and (min-width: 860px) {
.flex-caption {
max-width: 1600px;
margin: 0 auto;
position: absolute;
bottom: 10%;
z-index: 100;
}
.caption-container { position: relative; margin: 0 auto; padding-left: 5%; }
.text-container { max-width: 650px; position: relative; }

}

@media screen and (max-width:768px) {

.caption-one h1 { background:none; color: white; font-size:15px;    font-family: "Gafata", sans-serif; line-height:20px; text-shadow: 2px 2px 2px #000000; font-weight:700; margin:0; padding:0 }
.caption-one p { background:none; color: white; font-size:12px;  font-family: "Gafata", sans-serif; line-height:18px; text-shadow: 2px 2px 2px #000000; margin-top:5px; padding-top:0 }

}


/* Alternate Caption slideIn CSS */
/* Will not work properly without JS pull by Ryan Long https://github.com/woothemes/FlexSlider/pull/865 */
@-webkit-keyframes slideIn { 0% { left: 9%; opacity: 0; }
100% { left: 0; opacity: 1; } }

@-moz-keyframes slideIn { 0% { left: 9%; opacity: 0; }
100% { left: 0; opacity: 1; } }

@-o-keyframes slideIn { 0% { left: 9%; opacity: 0; }
100% { left: 0; opacity: 1; } }

@keyframes slideIn { 0% { left: 9%; opacity: 0; }
100% { left: 0; opacity: 1; } }





/* -- CUSTOM CAPTION ANIMATION -- */
@-webkit-keyframes slideLeftBaCaption {
0% {
left: 10%;
opacity: 0; }
100% {
left: 0;
opacity: 1; } }
@-moz-keyframes slideLeftBaCaption {
0% {
left: 10%;
opacity: 0; }
100% {
left: 0;
opacity: 1; } }
@keyframes slideLeftBaCaption {
0% {
left: 10%;
opacity: 0; }
100% {
left: 0;
opacity: 1; } }

/* -- CUSTOM CAPTION ANIMATION -- */
@-webkit-keyframes sliderightBaCaption {
0% {
right: 10%;
opacity: 0; }
100% {
right: 0;
opacity: 1; } }
@-moz-keyframes sliderightBaCaption {
0% {
right: 10%;
opacity: 0; }
100% {
right: 0;
opacity: 1; } }
@keyframes sliderightBaCaption {
0% {
right: 10%;
opacity: 0; }
100% {
right: 0;
opacity: 1; } }

.flex-active-slide .slider-caption {
-webkit-animation: slideLeftBaCaption 800ms 20ms ease-in-out;
-moz-animation: slideLeftBaCaption 800ms 20ms ease-in-out;
animation: slideLeftBaCaption 800ms 20ms ease-in-out; }

.flex-active-slide .slider-caption1 {
-webkit-animation: sliderightBaCaption 800ms 20ms ease-in-out;
-moz-animation: sliderightBaCaption 800ms 20ms ease-in-out;
animation: sliderightBaCaption 800ms 20ms ease-in-out; }