.ill_hero_slider { padding: 0 0 15px 0; position: relative; }
.ill_hero_slider .stage { overflow: hidden; padding: 0 0 56.25% 0; position: relative; width: 100%; z-index: 30; }
.ill_hero_slider .stage .slide { display: none; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 20; }
.ill_hero_slider .stage .slide.active { display: block; }
.ill_hero_slider .stage .slide .pic { height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; }
.ill_hero_slider .stage .slide .pic img { display: none; }
.ill_hero_slider .stage .slide .title { left: 0; padding: .5em 1em; position: absolute; top: 0; width: 100%; z-index: 20; background-color: #888; background-color: rgba(0, 0, 0, .5); color: #fff; }
.ill_hero_slider .stage .slide .caption { bottom: 0; left: 0; padding: .5em 1em; position: absolute; width: 100%; z-index: 40; background-color: #ccc; background-color: rgba(255, 255, 255, .75); color: #000; }
.ill_hero_slider .stage .slide a { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 60; }
.ill_hero_slider .stage .slide.transition { z-index: 40; }
.ill_hero_slider.slide-from-right .stage .slide.transition.slide_next, .ill_hero_slider.slide-from-left .stage .slide.transition.slide_prev { display: block; left: 100%; }
.ill_hero_slider.slide-from-right .stage .slide.transition.slide_prev, .ill_hero_slider.slide-from-left .stage .slide.transition.slide_next { display: block; left: -100%; }
.ill_hero_slider .controls { bottom: 0; height: 10px; position: absolute; width: 100%; z-index: 60; text-align: center; }
.ill_hero_slider .controls .playback { display: inline-block; vertical-align: top; }
.ill_hero_slider .controls .playback .play, .ill_hero_slider .controls .playback .pause { display: block; height: 10px; position: relative; width: 10px; cursor: pointer; text-indent: -9999px; box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; }
.ill_hero_slider .controls .playback .play { border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #000; display: none; height: 0; width: 0; content: ""; }
.ill_hero_slider .controls .playback .pause { border-width: 0 3px 0 3px; border-style: solid; border-color: #000; height: 10px; width: 9px; content: ""; }
.ill_hero_slider .controls .dots { display: inline-block; vertical-align: top; line-height: 0; }
.ill_hero_slider .controls .dots .dot { display: inline-block; height: 10px; margin: 0 0 0 10px; width: 10px; background-color: #888; background-color: rgba(0, 0, 0, .5); cursor: pointer; text-indent: -9999px; border-radius: 50%; transition: background 1s ease-out; -moz-transition: background 1s ease-out; -ms-transition: background 1s ease-out; -webkit-transition: background 1s ease-out; }
.ill_hero_slider .controls .dots .dot.active { background-color: #000; }
.ill_hero_slider .prev, .ill_hero_slider .next { height: 0; margin: -30px 0 0 0; position: absolute; top: 50%; width: 0; z-index: 60; cursor: pointer; text-indent: -9999px; }
.ill_hero_slider .prev { border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-right: 30px solid #fff; border-right: 30px solid rgba(255, 255, 255, .5); left: 10px; }
.ill_hero_slider .prev:hover { border-right-color: #fff; }
.ill_hero_slider .next { border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 30px solid #fff; border-left: 30px solid rgba(255, 255, 255, .5); right: 10px; }
.ill_hero_slider .next:hover { border-left-color: #fff; }

/* custom slider styles */
.ill_hero_slider.custom_style .stage .slide .pic { width: 45%; float: left; margin: 5%; height: auto; }
.ill_hero_slider.custom_style .stage .slide .pic img { display: block; width: 100%; height: auto; }
.ill_hero_slider.custom_style .stage .slide .info { display: block; width: 40%; float: right; position: relative; margin: 5% 5% 5% 0; }