<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Captions and Animations &#8211; Serious Slider Plugin Demo</title>
	<atom:link href="https://demos.cryoutcreations.eu/wordpress/serious-slider/cat/captions-and-animations/feed/" rel="self" type="application/rss+xml" />
	<link>https://demos.cryoutcreations.eu/wordpress/serious-slider</link>
	<description>A free highly efficient SEO friendly fully translatable image slider for WordPress</description>
	<lastBuildDate>Wed, 25 Oct 2017 18:31:53 +0000</lastBuildDate>
	<language>en-CA</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>
	<item>
		<title>Caption Variations</title>
		<link>https://demos.cryoutcreations.eu/wordpress/serious-slider/captions-and-animations/caption-variations/</link>
		
		<dc:creator><![CDATA[tech]]></dc:creator>
		<pubDate>Wed, 25 Oct 2017 03:00:54 +0000</pubDate>
				<category><![CDATA[Captions and Animations]]></category>
		<guid isPermaLink="false">https://demos.cryoutcreations.eu/wordpress/serious-slider/?p=69</guid>

					<description><![CDATA[No Background &#160; Text Shadow &#160; Background Color]]></description>
										<content:encoded><![CDATA[<h2>No Background</h2>
		<div id="serious-slider-2-r586" class="cryout-serious-slider seriousslider serious-slider-2-r586 serious-slider-2 seriousslider-overlay1 seriousslider-light seriousslider-shadow-none seriousslider-responsive-maintain seriousslider-hidetitles-0 seriousslider-slide seriousslider-sizing0 seriousslider-aligncenter seriousslider-caption-animation-slide seriousslider-textstyle-none" data-ride="seriousslider">
			<div class="seriousslider-inner" role="listbox">

			
			<div class="item slide-1 active" role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-1.jpg" alt="Serious Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Serious Slider</span></div>						<div class="seriousslider-caption-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lorem felis, egestas in posuere ac, pellentesque et nisl. Etiam id aliquam nulla. Nunc id commodo erat, at aliquet enim. Maecenas ut tempus est.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Read more</a>
																																<a class="seriousslider-button" href="" >Read less</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-2 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-3.jpg" alt="Customizable Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Customizable Slider</span></div>						<div class="seriousslider-caption-text"><p>Donec mollis elit et odio consectetur mattis. In pellentesque aliquam euismod. Mauris condimentum dui nunc, in congue dui sodales et. Pellentesque quis arcu lorem. Nam scelerisque fermentum ligula, eu ultrices purus congue non. Nullam fringilla mi in venenatis blandit. Curabitur iaculis sagittis leo vitae egestas. Donec eros nisl, dignissim eget arcu sit amet, tincidunt fermentum augue.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Button 1</a>
																																<a class="seriousslider-button" href="" >Button 2</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-3 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-2.jpg" alt="WordPress Responsive Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>WordPress Responsive Slider</span></div>						<div class="seriousslider-caption-text"><p>Integer maximus tellus neque, a rhoncus augue finibus non. Praesent ullamcorper dui non justo blandit dictum. Sed placerat elit eu lacus congue, in ultricies felis sodales. In convallis risus et enim convallis suscipit.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Sample Button</a>
																																				</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

						</div>

			<div class="seriousslider-indicators">
				<ol class="seriousslider-indicators-inside">
										<li data-target="#serious-slider-2-r586" data-slide-to="0" class="active" role="button"></li>
										<li data-target="#serious-slider-2-r586" data-slide-to="1"  role="button"></li>
										<li data-target="#serious-slider-2-r586" data-slide-to="2"  role="button"></li>
									</ol>
			</div>

			<button class="left seriousslider-control" data-target="#serious-slider-2-r586" role="button" data-slide="prev">
			  <span class="sicon-prev control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Previous Slide</span>
			</button>
			<button class="right seriousslider-control" data-target="#serious-slider-2-r586" role="button" data-slide="next">
			  <span class="sicon-next control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Next Slide</span>
			</button>
		</div>
		<!-- end cryout serious slider 2-r586 -->
		
<p>&nbsp;</p>
<h2>Text Shadow</h2>
		<div id="serious-slider-2-r771" class="cryout-serious-slider seriousslider serious-slider-2-r771 serious-slider-2 seriousslider-overlay1 seriousslider-light seriousslider-shadow-none seriousslider-responsive-maintain seriousslider-hidetitles-0 seriousslider-slide seriousslider-sizing0 seriousslider-aligncenter seriousslider-caption-animation-slide seriousslider-textstyle-textshadow" data-ride="seriousslider">
			<div class="seriousslider-inner" role="listbox">

			
			<div class="item slide-1 active" role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-1.jpg" alt="Serious Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Serious Slider</span></div>						<div class="seriousslider-caption-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lorem felis, egestas in posuere ac, pellentesque et nisl. Etiam id aliquam nulla. Nunc id commodo erat, at aliquet enim. Maecenas ut tempus est.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Read more</a>
																																<a class="seriousslider-button" href="" >Read less</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-2 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-3.jpg" alt="Customizable Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Customizable Slider</span></div>						<div class="seriousslider-caption-text"><p>Donec mollis elit et odio consectetur mattis. In pellentesque aliquam euismod. Mauris condimentum dui nunc, in congue dui sodales et. Pellentesque quis arcu lorem. Nam scelerisque fermentum ligula, eu ultrices purus congue non. Nullam fringilla mi in venenatis blandit. Curabitur iaculis sagittis leo vitae egestas. Donec eros nisl, dignissim eget arcu sit amet, tincidunt fermentum augue.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Button 1</a>
																																<a class="seriousslider-button" href="" >Button 2</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-3 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-2.jpg" alt="WordPress Responsive Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>WordPress Responsive Slider</span></div>						<div class="seriousslider-caption-text"><p>Integer maximus tellus neque, a rhoncus augue finibus non. Praesent ullamcorper dui non justo blandit dictum. Sed placerat elit eu lacus congue, in ultricies felis sodales. In convallis risus et enim convallis suscipit.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Sample Button</a>
																																				</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

						</div>

			<div class="seriousslider-indicators">
				<ol class="seriousslider-indicators-inside">
										<li data-target="#serious-slider-2-r771" data-slide-to="0" class="active" role="button"></li>
										<li data-target="#serious-slider-2-r771" data-slide-to="1"  role="button"></li>
										<li data-target="#serious-slider-2-r771" data-slide-to="2"  role="button"></li>
									</ol>
			</div>

			<button class="left seriousslider-control" data-target="#serious-slider-2-r771" role="button" data-slide="prev">
			  <span class="sicon-prev control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Previous Slide</span>
			</button>
			<button class="right seriousslider-control" data-target="#serious-slider-2-r771" role="button" data-slide="next">
			  <span class="sicon-next control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Next Slide</span>
			</button>
		</div>
		<!-- end cryout serious slider 2-r771 -->
		
<p>&nbsp;</p>
<h2>Background Color</h2>
		<div id="serious-slider-2-r174" class="cryout-serious-slider seriousslider serious-slider-2-r174 serious-slider-2 seriousslider-overlay1 seriousslider-light seriousslider-shadow-none seriousslider-responsive-maintain seriousslider-hidetitles-0 seriousslider-slide seriousslider-sizing0 seriousslider-aligncenter seriousslider-caption-animation-slide seriousslider-textstyle-bgcolor" data-ride="seriousslider">
			<div class="seriousslider-inner" role="listbox">

			
			<div class="item slide-1 active" role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-1.jpg" alt="Serious Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Serious Slider</span></div>						<div class="seriousslider-caption-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lorem felis, egestas in posuere ac, pellentesque et nisl. Etiam id aliquam nulla. Nunc id commodo erat, at aliquet enim. Maecenas ut tempus est.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Read more</a>
																																<a class="seriousslider-button" href="" >Read less</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-2 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-3.jpg" alt="Customizable Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Customizable Slider</span></div>						<div class="seriousslider-caption-text"><p>Donec mollis elit et odio consectetur mattis. In pellentesque aliquam euismod. Mauris condimentum dui nunc, in congue dui sodales et. Pellentesque quis arcu lorem. Nam scelerisque fermentum ligula, eu ultrices purus congue non. Nullam fringilla mi in venenatis blandit. Curabitur iaculis sagittis leo vitae egestas. Donec eros nisl, dignissim eget arcu sit amet, tincidunt fermentum augue.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Button 1</a>
																																<a class="seriousslider-button" href="" >Button 2</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-3 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-2.jpg" alt="WordPress Responsive Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>WordPress Responsive Slider</span></div>						<div class="seriousslider-caption-text"><p>Integer maximus tellus neque, a rhoncus augue finibus non. Praesent ullamcorper dui non justo blandit dictum. Sed placerat elit eu lacus congue, in ultricies felis sodales. In convallis risus et enim convallis suscipit.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Sample Button</a>
																																				</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

						</div>

			<div class="seriousslider-indicators">
				<ol class="seriousslider-indicators-inside">
										<li data-target="#serious-slider-2-r174" data-slide-to="0" class="active" role="button"></li>
										<li data-target="#serious-slider-2-r174" data-slide-to="1"  role="button"></li>
										<li data-target="#serious-slider-2-r174" data-slide-to="2"  role="button"></li>
									</ol>
			</div>

			<button class="left seriousslider-control" data-target="#serious-slider-2-r174" role="button" data-slide="prev">
			  <span class="sicon-prev control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Previous Slide</span>
			</button>
			<button class="right seriousslider-control" data-target="#serious-slider-2-r174" role="button" data-slide="next">
			  <span class="sicon-next control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Next Slide</span>
			</button>
		</div>
		<!-- end cryout serious slider 2-r174 -->
		
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Transition Animations</title>
		<link>https://demos.cryoutcreations.eu/wordpress/serious-slider/captions-and-animations/transition-animations/</link>
		
		<dc:creator><![CDATA[tech]]></dc:creator>
		<pubDate>Wed, 25 Oct 2017 02:20:54 +0000</pubDate>
				<category><![CDATA[Captions and Animations]]></category>
		<guid isPermaLink="false">https://demos.cryoutcreations.eu/wordpress/serious-slider/?p=66</guid>

					<description><![CDATA[Fade Transition &#160; Slide Transition &#160; Overslide Transition &#160; Underslide Transition &#160; Parallax Transition &#160; Horizontal Flip Transition &#160; Vertical Flip Transition]]></description>
										<content:encoded><![CDATA[<h2>Fade Transition</h2>
		<div id="serious-slider-2-r510" class="cryout-serious-slider seriousslider serious-slider-2-r510 serious-slider-2 seriousslider-overlay1 seriousslider-light seriousslider-shadow-none seriousslider-responsive-maintain seriousslider-hidetitles-0 seriousslider-fade seriousslider-sizing0 seriousslider-aligncenter seriousslider-caption-animation-slide seriousslider-textstyle-textshadow" data-ride="seriousslider">
			<div class="seriousslider-inner" role="listbox">

			
			<div class="item slide-1 active" role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-1.jpg" alt="Serious Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Serious Slider</span></div>						<div class="seriousslider-caption-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lorem felis, egestas in posuere ac, pellentesque et nisl. Etiam id aliquam nulla. Nunc id commodo erat, at aliquet enim. Maecenas ut tempus est.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Read more</a>
																																<a class="seriousslider-button" href="" >Read less</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-2 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-3.jpg" alt="Customizable Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Customizable Slider</span></div>						<div class="seriousslider-caption-text"><p>Donec mollis elit et odio consectetur mattis. In pellentesque aliquam euismod. Mauris condimentum dui nunc, in congue dui sodales et. Pellentesque quis arcu lorem. Nam scelerisque fermentum ligula, eu ultrices purus congue non. Nullam fringilla mi in venenatis blandit. Curabitur iaculis sagittis leo vitae egestas. Donec eros nisl, dignissim eget arcu sit amet, tincidunt fermentum augue.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Button 1</a>
																																<a class="seriousslider-button" href="" >Button 2</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-3 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-2.jpg" alt="WordPress Responsive Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>WordPress Responsive Slider</span></div>						<div class="seriousslider-caption-text"><p>Integer maximus tellus neque, a rhoncus augue finibus non. Praesent ullamcorper dui non justo blandit dictum. Sed placerat elit eu lacus congue, in ultricies felis sodales. In convallis risus et enim convallis suscipit.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Sample Button</a>
																																				</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

						</div>

			<div class="seriousslider-indicators">
				<ol class="seriousslider-indicators-inside">
										<li data-target="#serious-slider-2-r510" data-slide-to="0" class="active" role="button"></li>
										<li data-target="#serious-slider-2-r510" data-slide-to="1"  role="button"></li>
										<li data-target="#serious-slider-2-r510" data-slide-to="2"  role="button"></li>
									</ol>
			</div>

			<button class="left seriousslider-control" data-target="#serious-slider-2-r510" role="button" data-slide="prev">
			  <span class="sicon-prev control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Previous Slide</span>
			</button>
			<button class="right seriousslider-control" data-target="#serious-slider-2-r510" role="button" data-slide="next">
			  <span class="sicon-next control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Next Slide</span>
			</button>
		</div>
		<!-- end cryout serious slider 2-r510 -->
		
<p>&nbsp;</p>
<h2>Slide Transition</h2>
		<div id="serious-slider-2-r923" class="cryout-serious-slider seriousslider serious-slider-2-r923 serious-slider-2 seriousslider-overlay1 seriousslider-light seriousslider-shadow-none seriousslider-responsive-maintain seriousslider-hidetitles-0 seriousslider-slide seriousslider-sizing0 seriousslider-aligncenter seriousslider-caption-animation-slide seriousslider-textstyle-textshadow" data-ride="seriousslider">
			<div class="seriousslider-inner" role="listbox">

			
			<div class="item slide-1 active" role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-1.jpg" alt="Serious Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Serious Slider</span></div>						<div class="seriousslider-caption-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lorem felis, egestas in posuere ac, pellentesque et nisl. Etiam id aliquam nulla. Nunc id commodo erat, at aliquet enim. Maecenas ut tempus est.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Read more</a>
																																<a class="seriousslider-button" href="" >Read less</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-2 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-3.jpg" alt="Customizable Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Customizable Slider</span></div>						<div class="seriousslider-caption-text"><p>Donec mollis elit et odio consectetur mattis. In pellentesque aliquam euismod. Mauris condimentum dui nunc, in congue dui sodales et. Pellentesque quis arcu lorem. Nam scelerisque fermentum ligula, eu ultrices purus congue non. Nullam fringilla mi in venenatis blandit. Curabitur iaculis sagittis leo vitae egestas. Donec eros nisl, dignissim eget arcu sit amet, tincidunt fermentum augue.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Button 1</a>
																																<a class="seriousslider-button" href="" >Button 2</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-3 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-2.jpg" alt="WordPress Responsive Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>WordPress Responsive Slider</span></div>						<div class="seriousslider-caption-text"><p>Integer maximus tellus neque, a rhoncus augue finibus non. Praesent ullamcorper dui non justo blandit dictum. Sed placerat elit eu lacus congue, in ultricies felis sodales. In convallis risus et enim convallis suscipit.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Sample Button</a>
																																				</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

						</div>

			<div class="seriousslider-indicators">
				<ol class="seriousslider-indicators-inside">
										<li data-target="#serious-slider-2-r923" data-slide-to="0" class="active" role="button"></li>
										<li data-target="#serious-slider-2-r923" data-slide-to="1"  role="button"></li>
										<li data-target="#serious-slider-2-r923" data-slide-to="2"  role="button"></li>
									</ol>
			</div>

			<button class="left seriousslider-control" data-target="#serious-slider-2-r923" role="button" data-slide="prev">
			  <span class="sicon-prev control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Previous Slide</span>
			</button>
			<button class="right seriousslider-control" data-target="#serious-slider-2-r923" role="button" data-slide="next">
			  <span class="sicon-next control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Next Slide</span>
			</button>
		</div>
		<!-- end cryout serious slider 2-r923 -->
		
<p>&nbsp;</p>
<h2>Overslide Transition</h2>
		<div id="serious-slider-2-r553" class="cryout-serious-slider seriousslider serious-slider-2-r553 serious-slider-2 seriousslider-overlay1 seriousslider-light seriousslider-shadow-none seriousslider-responsive-maintain seriousslider-hidetitles-0 seriousslider-overlide seriousslider-sizing0 seriousslider-aligncenter seriousslider-caption-animation-slide seriousslider-textstyle-textshadow" data-ride="seriousslider">
			<div class="seriousslider-inner" role="listbox">

			
			<div class="item slide-1 active" role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-1.jpg" alt="Serious Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Serious Slider</span></div>						<div class="seriousslider-caption-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lorem felis, egestas in posuere ac, pellentesque et nisl. Etiam id aliquam nulla. Nunc id commodo erat, at aliquet enim. Maecenas ut tempus est.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Read more</a>
																																<a class="seriousslider-button" href="" >Read less</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-2 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-3.jpg" alt="Customizable Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Customizable Slider</span></div>						<div class="seriousslider-caption-text"><p>Donec mollis elit et odio consectetur mattis. In pellentesque aliquam euismod. Mauris condimentum dui nunc, in congue dui sodales et. Pellentesque quis arcu lorem. Nam scelerisque fermentum ligula, eu ultrices purus congue non. Nullam fringilla mi in venenatis blandit. Curabitur iaculis sagittis leo vitae egestas. Donec eros nisl, dignissim eget arcu sit amet, tincidunt fermentum augue.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Button 1</a>
																																<a class="seriousslider-button" href="" >Button 2</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-3 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-2.jpg" alt="WordPress Responsive Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>WordPress Responsive Slider</span></div>						<div class="seriousslider-caption-text"><p>Integer maximus tellus neque, a rhoncus augue finibus non. Praesent ullamcorper dui non justo blandit dictum. Sed placerat elit eu lacus congue, in ultricies felis sodales. In convallis risus et enim convallis suscipit.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Sample Button</a>
																																				</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

						</div>

			<div class="seriousslider-indicators">
				<ol class="seriousslider-indicators-inside">
										<li data-target="#serious-slider-2-r553" data-slide-to="0" class="active" role="button"></li>
										<li data-target="#serious-slider-2-r553" data-slide-to="1"  role="button"></li>
										<li data-target="#serious-slider-2-r553" data-slide-to="2"  role="button"></li>
									</ol>
			</div>

			<button class="left seriousslider-control" data-target="#serious-slider-2-r553" role="button" data-slide="prev">
			  <span class="sicon-prev control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Previous Slide</span>
			</button>
			<button class="right seriousslider-control" data-target="#serious-slider-2-r553" role="button" data-slide="next">
			  <span class="sicon-next control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Next Slide</span>
			</button>
		</div>
		<!-- end cryout serious slider 2-r553 -->
		
<p>&nbsp;</p>
<h2>Underslide Transition</h2>
		<div id="serious-slider-2-r411" class="cryout-serious-slider seriousslider serious-slider-2-r411 serious-slider-2 seriousslider-overlay1 seriousslider-light seriousslider-shadow-none seriousslider-responsive-maintain seriousslider-hidetitles-0 seriousslider-underslide seriousslider-sizing0 seriousslider-aligncenter seriousslider-caption-animation-slide seriousslider-textstyle-textshadow" data-ride="seriousslider">
			<div class="seriousslider-inner" role="listbox">

			
			<div class="item slide-1 active" role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-1.jpg" alt="Serious Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Serious Slider</span></div>						<div class="seriousslider-caption-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lorem felis, egestas in posuere ac, pellentesque et nisl. Etiam id aliquam nulla. Nunc id commodo erat, at aliquet enim. Maecenas ut tempus est.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Read more</a>
																																<a class="seriousslider-button" href="" >Read less</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-2 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-3.jpg" alt="Customizable Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Customizable Slider</span></div>						<div class="seriousslider-caption-text"><p>Donec mollis elit et odio consectetur mattis. In pellentesque aliquam euismod. Mauris condimentum dui nunc, in congue dui sodales et. Pellentesque quis arcu lorem. Nam scelerisque fermentum ligula, eu ultrices purus congue non. Nullam fringilla mi in venenatis blandit. Curabitur iaculis sagittis leo vitae egestas. Donec eros nisl, dignissim eget arcu sit amet, tincidunt fermentum augue.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Button 1</a>
																																<a class="seriousslider-button" href="" >Button 2</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-3 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-2.jpg" alt="WordPress Responsive Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>WordPress Responsive Slider</span></div>						<div class="seriousslider-caption-text"><p>Integer maximus tellus neque, a rhoncus augue finibus non. Praesent ullamcorper dui non justo blandit dictum. Sed placerat elit eu lacus congue, in ultricies felis sodales. In convallis risus et enim convallis suscipit.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Sample Button</a>
																																				</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

						</div>

			<div class="seriousslider-indicators">
				<ol class="seriousslider-indicators-inside">
										<li data-target="#serious-slider-2-r411" data-slide-to="0" class="active" role="button"></li>
										<li data-target="#serious-slider-2-r411" data-slide-to="1"  role="button"></li>
										<li data-target="#serious-slider-2-r411" data-slide-to="2"  role="button"></li>
									</ol>
			</div>

			<button class="left seriousslider-control" data-target="#serious-slider-2-r411" role="button" data-slide="prev">
			  <span class="sicon-prev control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Previous Slide</span>
			</button>
			<button class="right seriousslider-control" data-target="#serious-slider-2-r411" role="button" data-slide="next">
			  <span class="sicon-next control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Next Slide</span>
			</button>
		</div>
		<!-- end cryout serious slider 2-r411 -->
		
<p>&nbsp;</p>
<h2>Parallax Transition</h2>
		<div id="serious-slider-2-r993" class="cryout-serious-slider seriousslider serious-slider-2-r993 serious-slider-2 seriousslider-overlay1 seriousslider-light seriousslider-shadow-none seriousslider-responsive-maintain seriousslider-hidetitles-0 seriousslider-parallax seriousslider-sizing0 seriousslider-aligncenter seriousslider-caption-animation-slide seriousslider-textstyle-textshadow" data-ride="seriousslider">
			<div class="seriousslider-inner" role="listbox">

			
			<div class="item slide-1 active" role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-1.jpg" alt="Serious Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Serious Slider</span></div>						<div class="seriousslider-caption-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lorem felis, egestas in posuere ac, pellentesque et nisl. Etiam id aliquam nulla. Nunc id commodo erat, at aliquet enim. Maecenas ut tempus est.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Read more</a>
																																<a class="seriousslider-button" href="" >Read less</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-2 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-3.jpg" alt="Customizable Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Customizable Slider</span></div>						<div class="seriousslider-caption-text"><p>Donec mollis elit et odio consectetur mattis. In pellentesque aliquam euismod. Mauris condimentum dui nunc, in congue dui sodales et. Pellentesque quis arcu lorem. Nam scelerisque fermentum ligula, eu ultrices purus congue non. Nullam fringilla mi in venenatis blandit. Curabitur iaculis sagittis leo vitae egestas. Donec eros nisl, dignissim eget arcu sit amet, tincidunt fermentum augue.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Button 1</a>
																																<a class="seriousslider-button" href="" >Button 2</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-3 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-2.jpg" alt="WordPress Responsive Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>WordPress Responsive Slider</span></div>						<div class="seriousslider-caption-text"><p>Integer maximus tellus neque, a rhoncus augue finibus non. Praesent ullamcorper dui non justo blandit dictum. Sed placerat elit eu lacus congue, in ultricies felis sodales. In convallis risus et enim convallis suscipit.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Sample Button</a>
																																				</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

						</div>

			<div class="seriousslider-indicators">
				<ol class="seriousslider-indicators-inside">
										<li data-target="#serious-slider-2-r993" data-slide-to="0" class="active" role="button"></li>
										<li data-target="#serious-slider-2-r993" data-slide-to="1"  role="button"></li>
										<li data-target="#serious-slider-2-r993" data-slide-to="2"  role="button"></li>
									</ol>
			</div>

			<button class="left seriousslider-control" data-target="#serious-slider-2-r993" role="button" data-slide="prev">
			  <span class="sicon-prev control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Previous Slide</span>
			</button>
			<button class="right seriousslider-control" data-target="#serious-slider-2-r993" role="button" data-slide="next">
			  <span class="sicon-next control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Next Slide</span>
			</button>
		</div>
		<!-- end cryout serious slider 2-r993 -->
		
<p>&nbsp;</p>
<h2>Horizontal Flip Transition</h2>
		<div id="serious-slider-2-r749" class="cryout-serious-slider seriousslider serious-slider-2-r749 serious-slider-2 seriousslider-overlay1 seriousslider-light seriousslider-shadow-none seriousslider-responsive-maintain seriousslider-hidetitles-0 seriousslider-hflip seriousslider-sizing0 seriousslider-aligncenter seriousslider-caption-animation-slide seriousslider-textstyle-textshadow" data-ride="seriousslider">
			<div class="seriousslider-inner" role="listbox">

			
			<div class="item slide-1 active" role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-1.jpg" alt="Serious Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Serious Slider</span></div>						<div class="seriousslider-caption-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lorem felis, egestas in posuere ac, pellentesque et nisl. Etiam id aliquam nulla. Nunc id commodo erat, at aliquet enim. Maecenas ut tempus est.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Read more</a>
																																<a class="seriousslider-button" href="" >Read less</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-2 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-3.jpg" alt="Customizable Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Customizable Slider</span></div>						<div class="seriousslider-caption-text"><p>Donec mollis elit et odio consectetur mattis. In pellentesque aliquam euismod. Mauris condimentum dui nunc, in congue dui sodales et. Pellentesque quis arcu lorem. Nam scelerisque fermentum ligula, eu ultrices purus congue non. Nullam fringilla mi in venenatis blandit. Curabitur iaculis sagittis leo vitae egestas. Donec eros nisl, dignissim eget arcu sit amet, tincidunt fermentum augue.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Button 1</a>
																																<a class="seriousslider-button" href="" >Button 2</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-3 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-2.jpg" alt="WordPress Responsive Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>WordPress Responsive Slider</span></div>						<div class="seriousslider-caption-text"><p>Integer maximus tellus neque, a rhoncus augue finibus non. Praesent ullamcorper dui non justo blandit dictum. Sed placerat elit eu lacus congue, in ultricies felis sodales. In convallis risus et enim convallis suscipit.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Sample Button</a>
																																				</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

						</div>

			<div class="seriousslider-indicators">
				<ol class="seriousslider-indicators-inside">
										<li data-target="#serious-slider-2-r749" data-slide-to="0" class="active" role="button"></li>
										<li data-target="#serious-slider-2-r749" data-slide-to="1"  role="button"></li>
										<li data-target="#serious-slider-2-r749" data-slide-to="2"  role="button"></li>
									</ol>
			</div>

			<button class="left seriousslider-control" data-target="#serious-slider-2-r749" role="button" data-slide="prev">
			  <span class="sicon-prev control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Previous Slide</span>
			</button>
			<button class="right seriousslider-control" data-target="#serious-slider-2-r749" role="button" data-slide="next">
			  <span class="sicon-next control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Next Slide</span>
			</button>
		</div>
		<!-- end cryout serious slider 2-r749 -->
		
<p>&nbsp;</p>
<h2>Vertical Flip Transition</h2>
		<div id="serious-slider-2-r872" class="cryout-serious-slider seriousslider serious-slider-2-r872 serious-slider-2 seriousslider-overlay1 seriousslider-light seriousslider-shadow-none seriousslider-responsive-maintain seriousslider-hidetitles-0 seriousslider-vflip seriousslider-sizing0 seriousslider-aligncenter seriousslider-caption-animation-slide seriousslider-textstyle-textshadow" data-ride="seriousslider">
			<div class="seriousslider-inner" role="listbox">

			
			<div class="item slide-1 active" role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-1.jpg" alt="Serious Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Serious Slider</span></div>						<div class="seriousslider-caption-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lorem felis, egestas in posuere ac, pellentesque et nisl. Etiam id aliquam nulla. Nunc id commodo erat, at aliquet enim. Maecenas ut tempus est.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Read more</a>
																																<a class="seriousslider-button" href="" >Read less</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-2 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-3.jpg" alt="Customizable Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Customizable Slider</span></div>						<div class="seriousslider-caption-text"><p>Donec mollis elit et odio consectetur mattis. In pellentesque aliquam euismod. Mauris condimentum dui nunc, in congue dui sodales et. Pellentesque quis arcu lorem. Nam scelerisque fermentum ligula, eu ultrices purus congue non. Nullam fringilla mi in venenatis blandit. Curabitur iaculis sagittis leo vitae egestas. Donec eros nisl, dignissim eget arcu sit amet, tincidunt fermentum augue.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Button 1</a>
																																<a class="seriousslider-button" href="" >Button 2</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-3 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-2.jpg" alt="WordPress Responsive Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>WordPress Responsive Slider</span></div>						<div class="seriousslider-caption-text"><p>Integer maximus tellus neque, a rhoncus augue finibus non. Praesent ullamcorper dui non justo blandit dictum. Sed placerat elit eu lacus congue, in ultricies felis sodales. In convallis risus et enim convallis suscipit.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Sample Button</a>
																																				</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

						</div>

			<div class="seriousslider-indicators">
				<ol class="seriousslider-indicators-inside">
										<li data-target="#serious-slider-2-r872" data-slide-to="0" class="active" role="button"></li>
										<li data-target="#serious-slider-2-r872" data-slide-to="1"  role="button"></li>
										<li data-target="#serious-slider-2-r872" data-slide-to="2"  role="button"></li>
									</ol>
			</div>

			<button class="left seriousslider-control" data-target="#serious-slider-2-r872" role="button" data-slide="prev">
			  <span class="sicon-prev control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Previous Slide</span>
			</button>
			<button class="right seriousslider-control" data-target="#serious-slider-2-r872" role="button" data-slide="next">
			  <span class="sicon-next control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Next Slide</span>
			</button>
		</div>
		<!-- end cryout serious slider 2-r872 -->
		
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Caption Animations</title>
		<link>https://demos.cryoutcreations.eu/wordpress/serious-slider/captions-and-animations/caption-animations/</link>
		
		<dc:creator><![CDATA[tech]]></dc:creator>
		<pubDate>Wed, 25 Oct 2017 02:10:55 +0000</pubDate>
				<category><![CDATA[Captions and Animations]]></category>
		<guid isPermaLink="false">https://demos.cryoutcreations.eu/wordpress/serious-slider/?p=73</guid>

					<description><![CDATA[No Animation &#160; Fade Caption &#160; Slide Caption &#160; Blur Caption &#160; Zoom In Caption &#160; Zoom Out Caption]]></description>
										<content:encoded><![CDATA[<h2>No Animation</h2>
		<div id="serious-slider-2-r355" class="cryout-serious-slider seriousslider serious-slider-2-r355 serious-slider-2 seriousslider-overlay1 seriousslider-light seriousslider-shadow-none seriousslider-responsive-maintain seriousslider-hidetitles-0 seriousslider-slide seriousslider-sizing0 seriousslider-aligncenter seriousslider-caption-animation-none seriousslider-textstyle-textshadow" data-ride="seriousslider">
			<div class="seriousslider-inner" role="listbox">

			
			<div class="item slide-1 active" role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-1.jpg" alt="Serious Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Serious Slider</span></div>						<div class="seriousslider-caption-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lorem felis, egestas in posuere ac, pellentesque et nisl. Etiam id aliquam nulla. Nunc id commodo erat, at aliquet enim. Maecenas ut tempus est.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Read more</a>
																																<a class="seriousslider-button" href="" >Read less</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-2 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-3.jpg" alt="Customizable Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Customizable Slider</span></div>						<div class="seriousslider-caption-text"><p>Donec mollis elit et odio consectetur mattis. In pellentesque aliquam euismod. Mauris condimentum dui nunc, in congue dui sodales et. Pellentesque quis arcu lorem. Nam scelerisque fermentum ligula, eu ultrices purus congue non. Nullam fringilla mi in venenatis blandit. Curabitur iaculis sagittis leo vitae egestas. Donec eros nisl, dignissim eget arcu sit amet, tincidunt fermentum augue.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Button 1</a>
																																<a class="seriousslider-button" href="" >Button 2</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-3 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-2.jpg" alt="WordPress Responsive Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>WordPress Responsive Slider</span></div>						<div class="seriousslider-caption-text"><p>Integer maximus tellus neque, a rhoncus augue finibus non. Praesent ullamcorper dui non justo blandit dictum. Sed placerat elit eu lacus congue, in ultricies felis sodales. In convallis risus et enim convallis suscipit.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Sample Button</a>
																																				</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

						</div>

			<div class="seriousslider-indicators">
				<ol class="seriousslider-indicators-inside">
										<li data-target="#serious-slider-2-r355" data-slide-to="0" class="active" role="button"></li>
										<li data-target="#serious-slider-2-r355" data-slide-to="1"  role="button"></li>
										<li data-target="#serious-slider-2-r355" data-slide-to="2"  role="button"></li>
									</ol>
			</div>

			<button class="left seriousslider-control" data-target="#serious-slider-2-r355" role="button" data-slide="prev">
			  <span class="sicon-prev control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Previous Slide</span>
			</button>
			<button class="right seriousslider-control" data-target="#serious-slider-2-r355" role="button" data-slide="next">
			  <span class="sicon-next control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Next Slide</span>
			</button>
		</div>
		<!-- end cryout serious slider 2-r355 -->
		
<p>&nbsp;</p>
<h2>Fade Caption</h2>
		<div id="serious-slider-2-r793" class="cryout-serious-slider seriousslider serious-slider-2-r793 serious-slider-2 seriousslider-overlay1 seriousslider-light seriousslider-shadow-none seriousslider-responsive-maintain seriousslider-hidetitles-0 seriousslider-slide seriousslider-sizing0 seriousslider-aligncenter seriousslider-caption-animation-fade seriousslider-textstyle-textshadow" data-ride="seriousslider">
			<div class="seriousslider-inner" role="listbox">

			
			<div class="item slide-1 active" role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-1.jpg" alt="Serious Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Serious Slider</span></div>						<div class="seriousslider-caption-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lorem felis, egestas in posuere ac, pellentesque et nisl. Etiam id aliquam nulla. Nunc id commodo erat, at aliquet enim. Maecenas ut tempus est.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Read more</a>
																																<a class="seriousslider-button" href="" >Read less</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-2 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-3.jpg" alt="Customizable Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Customizable Slider</span></div>						<div class="seriousslider-caption-text"><p>Donec mollis elit et odio consectetur mattis. In pellentesque aliquam euismod. Mauris condimentum dui nunc, in congue dui sodales et. Pellentesque quis arcu lorem. Nam scelerisque fermentum ligula, eu ultrices purus congue non. Nullam fringilla mi in venenatis blandit. Curabitur iaculis sagittis leo vitae egestas. Donec eros nisl, dignissim eget arcu sit amet, tincidunt fermentum augue.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Button 1</a>
																																<a class="seriousslider-button" href="" >Button 2</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-3 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-2.jpg" alt="WordPress Responsive Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>WordPress Responsive Slider</span></div>						<div class="seriousslider-caption-text"><p>Integer maximus tellus neque, a rhoncus augue finibus non. Praesent ullamcorper dui non justo blandit dictum. Sed placerat elit eu lacus congue, in ultricies felis sodales. In convallis risus et enim convallis suscipit.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Sample Button</a>
																																				</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

						</div>

			<div class="seriousslider-indicators">
				<ol class="seriousslider-indicators-inside">
										<li data-target="#serious-slider-2-r793" data-slide-to="0" class="active" role="button"></li>
										<li data-target="#serious-slider-2-r793" data-slide-to="1"  role="button"></li>
										<li data-target="#serious-slider-2-r793" data-slide-to="2"  role="button"></li>
									</ol>
			</div>

			<button class="left seriousslider-control" data-target="#serious-slider-2-r793" role="button" data-slide="prev">
			  <span class="sicon-prev control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Previous Slide</span>
			</button>
			<button class="right seriousslider-control" data-target="#serious-slider-2-r793" role="button" data-slide="next">
			  <span class="sicon-next control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Next Slide</span>
			</button>
		</div>
		<!-- end cryout serious slider 2-r793 -->
		
<p>&nbsp;</p>
<h2>Slide Caption</h2>
		<div id="serious-slider-2-r638" class="cryout-serious-slider seriousslider serious-slider-2-r638 serious-slider-2 seriousslider-overlay1 seriousslider-light seriousslider-shadow-none seriousslider-responsive-maintain seriousslider-hidetitles-0 seriousslider-slide seriousslider-sizing0 seriousslider-aligncenter seriousslider-caption-animation-slide seriousslider-textstyle-textshadow" data-ride="seriousslider">
			<div class="seriousslider-inner" role="listbox">

			
			<div class="item slide-1 active" role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-1.jpg" alt="Serious Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Serious Slider</span></div>						<div class="seriousslider-caption-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lorem felis, egestas in posuere ac, pellentesque et nisl. Etiam id aliquam nulla. Nunc id commodo erat, at aliquet enim. Maecenas ut tempus est.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Read more</a>
																																<a class="seriousslider-button" href="" >Read less</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-2 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-3.jpg" alt="Customizable Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Customizable Slider</span></div>						<div class="seriousslider-caption-text"><p>Donec mollis elit et odio consectetur mattis. In pellentesque aliquam euismod. Mauris condimentum dui nunc, in congue dui sodales et. Pellentesque quis arcu lorem. Nam scelerisque fermentum ligula, eu ultrices purus congue non. Nullam fringilla mi in venenatis blandit. Curabitur iaculis sagittis leo vitae egestas. Donec eros nisl, dignissim eget arcu sit amet, tincidunt fermentum augue.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Button 1</a>
																																<a class="seriousslider-button" href="" >Button 2</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-3 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-2.jpg" alt="WordPress Responsive Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>WordPress Responsive Slider</span></div>						<div class="seriousslider-caption-text"><p>Integer maximus tellus neque, a rhoncus augue finibus non. Praesent ullamcorper dui non justo blandit dictum. Sed placerat elit eu lacus congue, in ultricies felis sodales. In convallis risus et enim convallis suscipit.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Sample Button</a>
																																				</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

						</div>

			<div class="seriousslider-indicators">
				<ol class="seriousslider-indicators-inside">
										<li data-target="#serious-slider-2-r638" data-slide-to="0" class="active" role="button"></li>
										<li data-target="#serious-slider-2-r638" data-slide-to="1"  role="button"></li>
										<li data-target="#serious-slider-2-r638" data-slide-to="2"  role="button"></li>
									</ol>
			</div>

			<button class="left seriousslider-control" data-target="#serious-slider-2-r638" role="button" data-slide="prev">
			  <span class="sicon-prev control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Previous Slide</span>
			</button>
			<button class="right seriousslider-control" data-target="#serious-slider-2-r638" role="button" data-slide="next">
			  <span class="sicon-next control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Next Slide</span>
			</button>
		</div>
		<!-- end cryout serious slider 2-r638 -->
		
<p>&nbsp;</p>
<h2>Blur Caption</h2>
		<div id="serious-slider-2-r234" class="cryout-serious-slider seriousslider serious-slider-2-r234 serious-slider-2 seriousslider-overlay1 seriousslider-light seriousslider-shadow-none seriousslider-responsive-maintain seriousslider-hidetitles-0 seriousslider-slide seriousslider-sizing0 seriousslider-aligncenter seriousslider-caption-animation-blur seriousslider-textstyle-textshadow" data-ride="seriousslider">
			<div class="seriousslider-inner" role="listbox">

			
			<div class="item slide-1 active" role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-1.jpg" alt="Serious Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Serious Slider</span></div>						<div class="seriousslider-caption-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lorem felis, egestas in posuere ac, pellentesque et nisl. Etiam id aliquam nulla. Nunc id commodo erat, at aliquet enim. Maecenas ut tempus est.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Read more</a>
																																<a class="seriousslider-button" href="" >Read less</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-2 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-3.jpg" alt="Customizable Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Customizable Slider</span></div>						<div class="seriousslider-caption-text"><p>Donec mollis elit et odio consectetur mattis. In pellentesque aliquam euismod. Mauris condimentum dui nunc, in congue dui sodales et. Pellentesque quis arcu lorem. Nam scelerisque fermentum ligula, eu ultrices purus congue non. Nullam fringilla mi in venenatis blandit. Curabitur iaculis sagittis leo vitae egestas. Donec eros nisl, dignissim eget arcu sit amet, tincidunt fermentum augue.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Button 1</a>
																																<a class="seriousslider-button" href="" >Button 2</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-3 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-2.jpg" alt="WordPress Responsive Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>WordPress Responsive Slider</span></div>						<div class="seriousslider-caption-text"><p>Integer maximus tellus neque, a rhoncus augue finibus non. Praesent ullamcorper dui non justo blandit dictum. Sed placerat elit eu lacus congue, in ultricies felis sodales. In convallis risus et enim convallis suscipit.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Sample Button</a>
																																				</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

						</div>

			<div class="seriousslider-indicators">
				<ol class="seriousslider-indicators-inside">
										<li data-target="#serious-slider-2-r234" data-slide-to="0" class="active" role="button"></li>
										<li data-target="#serious-slider-2-r234" data-slide-to="1"  role="button"></li>
										<li data-target="#serious-slider-2-r234" data-slide-to="2"  role="button"></li>
									</ol>
			</div>

			<button class="left seriousslider-control" data-target="#serious-slider-2-r234" role="button" data-slide="prev">
			  <span class="sicon-prev control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Previous Slide</span>
			</button>
			<button class="right seriousslider-control" data-target="#serious-slider-2-r234" role="button" data-slide="next">
			  <span class="sicon-next control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Next Slide</span>
			</button>
		</div>
		<!-- end cryout serious slider 2-r234 -->
		
<p>&nbsp;</p>
<h2>Zoom In Caption</h2>
		<div id="serious-slider-2-r849" class="cryout-serious-slider seriousslider serious-slider-2-r849 serious-slider-2 seriousslider-overlay1 seriousslider-light seriousslider-shadow-none seriousslider-responsive-maintain seriousslider-hidetitles-0 seriousslider-slide seriousslider-sizing0 seriousslider-aligncenter seriousslider-caption-animation-zoomin seriousslider-textstyle-textshadow" data-ride="seriousslider">
			<div class="seriousslider-inner" role="listbox">

			
			<div class="item slide-1 active" role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-1.jpg" alt="Serious Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Serious Slider</span></div>						<div class="seriousslider-caption-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lorem felis, egestas in posuere ac, pellentesque et nisl. Etiam id aliquam nulla. Nunc id commodo erat, at aliquet enim. Maecenas ut tempus est.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Read more</a>
																																<a class="seriousslider-button" href="" >Read less</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-2 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-3.jpg" alt="Customizable Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Customizable Slider</span></div>						<div class="seriousslider-caption-text"><p>Donec mollis elit et odio consectetur mattis. In pellentesque aliquam euismod. Mauris condimentum dui nunc, in congue dui sodales et. Pellentesque quis arcu lorem. Nam scelerisque fermentum ligula, eu ultrices purus congue non. Nullam fringilla mi in venenatis blandit. Curabitur iaculis sagittis leo vitae egestas. Donec eros nisl, dignissim eget arcu sit amet, tincidunt fermentum augue.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Button 1</a>
																																<a class="seriousslider-button" href="" >Button 2</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-3 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-2.jpg" alt="WordPress Responsive Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>WordPress Responsive Slider</span></div>						<div class="seriousslider-caption-text"><p>Integer maximus tellus neque, a rhoncus augue finibus non. Praesent ullamcorper dui non justo blandit dictum. Sed placerat elit eu lacus congue, in ultricies felis sodales. In convallis risus et enim convallis suscipit.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Sample Button</a>
																																				</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

						</div>

			<div class="seriousslider-indicators">
				<ol class="seriousslider-indicators-inside">
										<li data-target="#serious-slider-2-r849" data-slide-to="0" class="active" role="button"></li>
										<li data-target="#serious-slider-2-r849" data-slide-to="1"  role="button"></li>
										<li data-target="#serious-slider-2-r849" data-slide-to="2"  role="button"></li>
									</ol>
			</div>

			<button class="left seriousslider-control" data-target="#serious-slider-2-r849" role="button" data-slide="prev">
			  <span class="sicon-prev control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Previous Slide</span>
			</button>
			<button class="right seriousslider-control" data-target="#serious-slider-2-r849" role="button" data-slide="next">
			  <span class="sicon-next control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Next Slide</span>
			</button>
		</div>
		<!-- end cryout serious slider 2-r849 -->
		
<p>&nbsp;</p>
<h2>Zoom Out Caption</h2>
		<div id="serious-slider-2-r774" class="cryout-serious-slider seriousslider serious-slider-2-r774 serious-slider-2 seriousslider-overlay1 seriousslider-light seriousslider-shadow-none seriousslider-responsive-maintain seriousslider-hidetitles-0 seriousslider-slide seriousslider-sizing0 seriousslider-aligncenter seriousslider-caption-animation-zoomout seriousslider-textstyle-textshadow" data-ride="seriousslider">
			<div class="seriousslider-inner" role="listbox">

			
			<div class="item slide-1 active" role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-1.jpg" alt="Serious Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Serious Slider</span></div>						<div class="seriousslider-caption-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lorem felis, egestas in posuere ac, pellentesque et nisl. Etiam id aliquam nulla. Nunc id commodo erat, at aliquet enim. Maecenas ut tempus est.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Read more</a>
																																<a class="seriousslider-button" href="" >Read less</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-2 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-3.jpg" alt="Customizable Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>Customizable Slider</span></div>						<div class="seriousslider-caption-text"><p>Donec mollis elit et odio consectetur mattis. In pellentesque aliquam euismod. Mauris condimentum dui nunc, in congue dui sodales et. Pellentesque quis arcu lorem. Nam scelerisque fermentum ligula, eu ultrices purus congue non. Nullam fringilla mi in venenatis blandit. Curabitur iaculis sagittis leo vitae egestas. Donec eros nisl, dignissim eget arcu sit amet, tincidunt fermentum augue.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Button 1</a>
																																<a class="seriousslider-button" href="" >Button 2</a>
																					</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

			
			<div class="item slide-3 " role="option">
								<a  >
					<img decoding="async" class="item-image" src="https://demos.cryoutcreations.eu/wordpress/serious-slider/wp-content/uploads/2017/10/sample-slide-2.jpg" alt="WordPress Responsive Slider" >
				</a>
												<div class="seriousslider-caption">
					<div class="seriousslider-caption-inside">
						<div class="seriousslider-caption-title"><span>WordPress Responsive Slider</span></div>						<div class="seriousslider-caption-text"><p>Integer maximus tellus neque, a rhoncus augue finibus non. Praesent ullamcorper dui non justo blandit dictum. Sed placerat elit eu lacus congue, in ultricies felis sodales. In convallis risus et enim convallis suscipit.</p>
</div>						<div class="seriousslider-caption-buttons">
																								<a class="seriousslider-button" href="" >Sample Button</a>
																																				</div>
					</div><!--seriousslider-caption-inside-->
				</div><!--seriousslider-caption-->
								<div class="seriousslider-hloader"></div>
				<figure class="seriousslider-cloader">
					<svg width="200" height="200">
						<circle cx="95" cy="95" r="20" transform="rotate(-90, 95, 95)"/>
					</svg>
			  </figure>
			</div>

						</div>

			<div class="seriousslider-indicators">
				<ol class="seriousslider-indicators-inside">
										<li data-target="#serious-slider-2-r774" data-slide-to="0" class="active" role="button"></li>
										<li data-target="#serious-slider-2-r774" data-slide-to="1"  role="button"></li>
										<li data-target="#serious-slider-2-r774" data-slide-to="2"  role="button"></li>
									</ol>
			</div>

			<button class="left seriousslider-control" data-target="#serious-slider-2-r774" role="button" data-slide="prev">
			  <span class="sicon-prev control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Previous Slide</span>
			</button>
			<button class="right seriousslider-control" data-target="#serious-slider-2-r774" role="button" data-slide="next">
			  <span class="sicon-next control-arrow" aria-hidden="true"></span>
			  <span class="sr-only">Next Slide</span>
			</button>
		</div>
		<!-- end cryout serious slider 2-r774 -->
		
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
