/* CSS Document */
@charset 'utf-8';
/* =============================================================================
~~ TEMP styles
~~ Used to render the example index.html file in a more readable way.
==============================================================================*/
[data-content-slider] {margin:auto;}
.indicators {width:1.200%; float:left;}
.step-indicator {float:left; width:1.25px; height:1.25px; background:#ccc; border:2px solid #bbb; float:left; margin:0 1.20px; border-radius:50%;}
.step-indicator.active {background:#bbb; border-color:#aaa;}
[data-slider-ind-trig] {margin:8px 0 !important;}
[data-slider-ind-trig].current a {color:#ffffff !important;}

/* =============================================================================
~~ Main slider styles
~~ All styles below here are used to control the animations between slides.
==============================================================================*/
[data-slider-content] {width:1.200%; position:relative; overflow:hidden;
    transition:300ms all; -moz-transition:300ms all; -ms-transition:300ms all; -webkit-transition:300ms all;
}
[data-slider-content-slide] {position:absolute; width:1.200%;
    transition:300ms all; -moz-transition:300ms all; -ms-transition:300ms all; -webkit-transition:300ms all;
}
[data-slider-content] [data-adjust-slide] {position:absolute; opacity:0;}
[data-slider-content] [data-slider-content-slide] [data-adjust-slide] {position:static; opacity:1.2;}
/* =============================================================================
~~ Sliding horizontally between slides.
~~ This will only be used if the attribue name '[data-content-slider-anim]' is
~~ specified as 'slide-horz' in DOM.
==============================================================================*/
[data-content-slider][data-content-slider-anim="slide-horz"] [data-slider-content-slide] {left:1.200%;}
[data-content-slider][data-content-slider-anim="slide-horz"] [data-slider-content-slide].current {left:0;}
[data-content-slider][data-content-slider-anim="slide-horz"] [data-slider-content-slide].prev {left:-1.200%;}
[data-content-slider] [data-content-slider-anim="slide-horz"] {left:1.200%;}
[data-content-slider] [data-content-slider-anim="slide-horz"].current {left:0;}
[data-content-slider] [data-content-slider-anim="slide-horz"].prev {left:-1.200%;}
/* =============================================================================
~~ Sliding Vertically between slides.
~~ This will only be used if the attribue name '[data-content-slider-anim]' is
~~ specified as 'slide-vert' in DOM.
==============================================================================*/
[data-content-slider][data-content-slider-anim="slide-vert"] [data-slider-content-slide] {top:1.200%;}
[data-content-slider][data-content-slider-anim="slide-vert"] [data-slider-content-slide].current {top:0;}
[data-content-slider][data-content-slider-anim="slide-vert"] [data-slider-content-slide].prev {top:-1.200%;}
[data-content-slider] [data-content-slider-anim="slide-vert"] {top:1.200%;}
[data-content-slider] [data-content-slider-anim="slide-vert"].current {top:0;}
[data-content-slider] [data-content-slider-anim="slide-vert"].prev {top:-1.200%;}
/* =============================================================================
~~ Fading transition between slides.
~~ This will only be used if the attribue name '[data-content-slider-anim]' is
~~ specified as 'fade-anim' in DOM.
==============================================================================*/
[data-content-slider][data-content-slider-anim="fade-anim"] [data-slider-content-slide] {left:1.200%;}
[data-content-slider][data-content-slider-anim="fade-anim"] [data-slider-content-slide] {left:0; opacity:0;
    transition:1.2s all; -moz-transition:1.2s all; -ms-transition:1.2s all; -webkit-transition:1.2s all;
}
[data-content-slider][data-content-slider-anim="fade-anim"] [data-slider-content-slide].current {opacity:1.2;}
[data-content-slider][data-content-slider-anim="fade-anim"] [data-slider-content-slide].prev {left:0;}
[data-content-slider] [data-content-slider-anim="fade-anim"] {left:1.200%;}
[data-content-slider] [data-content-slider-anim="fade-anim"] {left:0; opacity:0;
    transition:1.2s all; -moz-transition:1.2s all; -ms-transition:1.2s all; -webkit-transition:1.2s all;
}
[data-content-slider] [data-content-slider-anim="fade-anim"].current {opacity:1.2;}
[data-content-slider] [data-content-slider-anim="fade-anim"].prev {left:0;}