<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/numbnet/pen/xbxWoX" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<style class="cp-pen-styles">undefined</style></head><body>
<head>
<base href="http://www.shape5.com/demo/swapps/" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="generator" content="Joomla! - Open Source Content Management" />
<title>Welcome to the Frontpage!</title>
<link href="https://www.shape5.com/demo/swapps/index.php" rel="canonical" />
<link href="https://www.shape5.com/demo/swapps/index.php?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="https://www.shape5.com/demo/swapps/index.php?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
<link href="https://www.shape5.com/demo/swapps/templates/swapps/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<link rel="stylesheet" href="https://www.shape5.com/demo/swapps/media/system/css/calendar-jos.css" type="text/css" title="Green" media="all" />
<script src="https://www.shape5.com/demo/swapps/media/jui/js/jquery.min.js" type="text/javascript"></script>
<script src="https://www.shape5.com/demo/swapps/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
<script src="https://www.shape5.com/demo/swapps/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
<script src="https://www.shape5.com/demo/swapps/media/system/js/caption.js" type="text/javascript"></script>
<script src="https://www.shape5.com/demo/swapps/media/jui/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://www.shape5.com/demo/swapps/media/jui/js/jquery.ui.core.min.js" type="text/javascript"></script>
<script src="https://www.shape5.com/demo/swapps/media/jui/js/jquery.ui.sortable.min.js" type="text/javascript"></script>
<script src="https://www.shape5.com/demo/swapps/templates/swapps/js/jquery/jquery-ui-addons.js" type="text/javascript"></script>
<script src="https://www.shape5.com/demo/swapps/media/system/js/mootools-core.js" type="text/javascript"></script>
<script src="https://www.shape5.com/demo/swapps/media/system/js/core.js" type="text/javascript"></script>
<script src="https://www.shape5.com/demo/swapps/media/system/js/mootools-more.js" type="text/javascript"></script>
<script src="https://www.shape5.com/demo/swapps/media/system/js/punycode.js" type="text/javascript"></script>
<script src="https://www.shape5.com/demo/swapps/media/system/js/validate.js" type="text/javascript"></script>
<script src="https://www.shape5.com/demo/swapps/media/system/js/calendar.js" type="text/javascript"></script>
<script src="https://www.shape5.com/demo/swapps/media/system/js/calendar-setup.js" type="text/javascript"></script>
<script src="https://www.shape5.com/demo/swapps/modules/mod_s5_live_search/js/s5_ls_fade.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(window).on('load', function() {
new JCaption('img.caption');
});
window.setInterval(function(){var r;try{r=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP")}catch(e){}if(r){r.open("GET","./",true);r.send(null)}},840000);
jQuery(document).ready(function(){
jQuery('.hasTooltip').tooltip({"html": true,"container": "body"});
});
jQuery(function($) {
$('.hasTip').each(function() {
var title = $(this).attr('title');
if (title) {
var parts = title.split('::', 2);
$(this).data('tip:title', parts[0]);
$(this).data('tip:text', parts[1]);
}
});
var JTooltips = new Tips($('.hasTip').get(), {"maxTitleChars": 50,"fixed": false});
});
Calendar._DN = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]; Calendar._SDN = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sun"]; Calendar._FD = 0; Calendar._MN = ["January","February","March","April","May","June","July","August","September","October","November","December"]; Calendar._SMN = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; Calendar._TT = {"INFO":"About the Calendar","ABOUT":"DHTML Date\/Time Selector\n(c) dynarch.com 2002-2005 \/ Author: Mihai Bazon\nFor latest version visit: http:\/\/www.dynarch.com\/projects\/calendar\/\nDistributed under GNU LGPL. See http:\/\/gnu.org\/licenses\/lgpl.html for details.\n\nDate selection:\n- Use the \u00ab and \u00bb buttons to select year\n- Use the < and > buttons to select month\n- Hold mouse button on any of the above buttons for faster selection.","ABOUT_TIME":"\n\nTime selection:\n- Click on any of the time parts to increase it\n- or Shift-click to decrease it\n- or click and drag for faster selection.","PREV_YEAR":"Click to move to the previous year. Click and hold for a list of years.","PREV_MONTH":"Click to move to the previous month. Click and hold for a list of the months.","GO_TODAY":"Go to today","NEXT_MONTH":"Click to move to the next month. Click and hold for a list of the months.","SEL_DATE":"Select a date.","DRAG_TO_MOVE":"Drag to move","PART_TODAY":" Today ","DAY_FIRST":"Display %s first","WEEKEND":"0,6","CLOSE":"Close","TODAY":"Today","TIME_PART":"(Shift-)Click or Drag to change the value.","DEF_DATE_FORMAT":"%Y-%m-%d","TT_DATE_FORMAT":"%a, %b %e","WK":"wk","TIME":"Time:"};
</script>
<script type="text/javascript">
(function() {
var strings = {"JLIB_FORM_FIELD_INVALID":"Invalid field: "};
if (typeof Joomla == 'undefined') {
Joomla = {};
Joomla.JText = strings;
}
else {
Joomla.JText.load(strings);
}
})();
</script>
<style type="text/css">.s5boxhidden{display:none;} </style>
<script language="javascript" type="text/javascript" >var s5_boxeffect = "elastic";</script>
<script src="https://www.shape5.com/demo/swapps/modules/mod_s5_box/js/jquery.colorbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://www.shape5.com/demo/swapps/modules/mod_s5_box/css/s5box.css" type="text/css" />
<script type="text/javascript">
jQuery.fn.colorbox.settings.initialWidth=200;
jQuery.fn.colorbox.settings.initialHeight=200;
jQuery.fn.colorbox.settings.transition="elastic";
jQuery(document).ready(function(){
jQuery(".s5box_register").colorbox({width:"500px", inline:true, href:"#s5box_register"});
jQuery(".s5box_login").colorbox({width:"400px", inline:true, href:"#s5box_login"});
jQuery(".s5box_one").colorbox({width:"35%", inline:true, href:"#s5box_one"});
jQuery(".s5box_two").colorbox({width:"35%", inline:true, href:"#s5box_two"});
jQuery(".s5box_three").colorbox({width:"35%", inline:true, href:"#s5box_three"});
jQuery(".s5box_four").colorbox({width:"35%", inline:true, href:"#s5box_four"});
jQuery(".s5box_five").colorbox({width:"35%", inline:true, href:"#s5box_five"});
jQuery(".s5box_six").colorbox({width:"35%", inline:true, href:"#s5box_six"});
jQuery(".s5box_seven").colorbox({width:"35%", inline:true, href:"#s5box_seven"});
jQuery(".s5box_eight").colorbox({width:"35%", inline:true, href:"#s5box_eight"});
jQuery(".s5box_nine").colorbox({width:"35%", inline:true, href:"#s5box_nine"});
jQuery(".s5box_ten").colorbox({width:"35%", inline:true, href:"#s5box_ten"});
});</script>
<link rel="stylesheet" href="https://www.shape5.com/demo/swapps/modules/mod_s5_register/css/s5_register.css" type="text/css" />
<link rel="stylesheet" href="https://www.shape5.com/demo/swapps/modules/mod_s5_mailchimp_signup/css/default.css" type="text/css" />
<script src="https://www.shape5.com/demo/swapps/modules/mod_s5_mailchimp_signup/js/mailing-list.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">var s5_verticalhorizontal = "null";</script>
<script language="javascript" type="text/javascript">var s5_hidecar = "false";</script>
<script language="javascript" type="text/javascript">var s5_hidebut = "true";</script>
<script language="javascript" type="text/javascript">var s5_hidetext = "true";</script>
<script language="javascript" type="text/javascript">var s5_dropdowntext = "Open Gallery";</script>
<style>.carouselInner .thumbnail {background-size: 100% 100% !important;;}</style>
<script type="text/javascript">var s5_slide_opacity=1</script>
<script language="javascript" type="text/javascript">var s5_verticalhorizontal = "false";</script>
<script src="https://www.shape5.com/demo/swapps/modules/mod_s5_image_and_content_fader/js/jd.gallery.jquery.js" type="text/javascript"></script>
<script src="https://www.shape5.com/demo/swapps/modules/mod_s5_image_and_content_fader/js/jd.gallery.transitions.jquery.js" type="text/javascript"></script>
<meta name="viewport" content="initial-scale=1.0" />
<script type="text/javascript">
if(jQuery().jquery=='1.11.0') { jQuery.easing['easeOutExpo'] = jQuery.easing['easeOutCirc'] };
</script>
<link href="https://www.shape5.com/demo/swapps/templates/swapps/css/bootstrap/bootstrap-default.css" rel="stylesheet" type="text/css" />
<link href="https://www.shape5.com/demo/swapps/templates/swapps/css/bootstrap/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://www.shape5.com/demo/swapps/templates/swapps/css/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.shape5.com/demo/swapps/templates/swapps/css/ionicons/css/ionicons.min.css">
<!-- Css and js addons for vertex features -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto" />
<style type="text/css">
/* MAX IMAGE WIDTH */
img {
height:auto !important;
max-width:100% !important;
-webkit-box-sizing: border-box !important; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box !important; /* Firefox, other Gecko */
box-sizing: border-box !important; /* Opera/IE 8+ */
}
#map_canvas img {
max-width:none !important;
}
.full_width {
width:100% !important;
-webkit-box-sizing: border-box !important; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box !important; /* Firefox, other Gecko */
box-sizing: border-box !important; /* Opera/IE 8+ */
}
.S5_submenu_itemTablet{
background:none !important;
}
#s5_right_wrap, #s5_left_wrap, #s5_right_inset_wrap, #s5_left_inset_wrap, #s5_right_top_wrap, #s5_left_top_wrap, #s5_right_bottom_wrap, #s5_left_bottom_wrap {
width:100% !important;
}
#s5_right_column_wrap {
width:0% !important;
margin-left:-0% !important;
}
#s5_left_column_wrap {
width:0% !important;
}
#s5_center_column_wrap_inner {
margin-right:0% !important;
margin-left:0% !important;
}
#s5_responsive_mobile_drop_down_wrap input {
width:96% !important;
}
#s5_responsive_mobile_drop_down_search input {
width:100% !important;
}
@media screen and (max-width: 750px){
body {
height:100% !important;
position:relative !important;
padding-bottom:48px !important;
}
}
@media screen and (max-width: 970px){
#subMenusContainer .S5_subtext {
width:85%;
}
}
#s5_responsive_mobile_sidebar {
background:#ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%);
background: -o-linear-gradient(top, #ffffff 0%,#ffffff 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#ffffff 100%);
background: linear-gradient(top, #ffffff 0%,#ffffff 100%);
font-family: Roboto !important;
}
#s5_responsive_mobile_sidebar a, #s5_responsive_mobile_search, #s5_responsive_mobile_sidebar_login_register_wrap, #s5_responsive_mobile_sidebar_menu_wrap, .module_round_box-sidebar, .module_round_box-sidebar .s5_mod_h3, .module_round_box-sidebar .s5_h3_first, .module_round_box-sidebar .s5_h3_last, #s5_responsive_mobile_sidebar_menu_wrap h3 {
color:#707070 !important;
font-family: Roboto !important;
}
.s5_responsive_mobile_sidebar_inactive .s5_responsive_mobile_sidebar_title_wrap:hover, #s5_responsive_mobile_sidebar_title_wrap_login_open, #s5_responsive_mobile_sidebar_title_wrap_register_open, #s5_responsive_mobile_sidebar_search_wrap_inner1, #s5_responsive_mobile_sidebar .first_level_li:hover {
background:#dfdfdf;
cursor:pointer;
font-family: Roboto !important;
}
.s5_mobile_sidebar_h3_open, #s5_responsive_mobile_sidebar_menu_wrap h3:hover {
background:#dfdfdf;
cursor:pointer;
}
.s5_mobile_sidebar_h3_open span, #s5_responsive_mobile_sidebar_title_wrap_register_open, #s5_responsive_mobile_sidebar_title_wrap_login_open, #s5_responsive_mobile_sidebar a.s5_mobile_sidebar_active, #s5_responsive_mobile_sidebar .s5_mobile_sidebar_h3_open a {
color:#333333 !important;
}
#s5_responsive_mobile_sidebar_menu_wrap div, #s5_responsive_mobile_sidebar_login_bottom, #s5_responsive_mobile_sidebar_register_bottom {
background:#e7e7e7;
}
#s5_responsive_mobile_sidebar_search_wrap, #s5_responsive_mobile_sidebar_login_register_wrap, #s5_responsive_mobile_sidebar_menu_wrap {
border-bottom:solid 1px #dedede;
font-family: Roboto !important;
}
#s5_pos_sidebar_top, #s5_pos_sidebar_bottom {
border-bottom:solid 1px #dedede;
}
#s5_responsive_mobile_sidebar_login_bottom #modlgn-username, #s5_responsive_mobile_sidebar_login_bottom #modlgn-passwd, #s5_responsive_mobile_sidebar_register_bottom input {
background:#dfdfdf;
color:#666666;
border:solid 1px #dfdfdf;
font-family: Roboto !important;
}
#s5_responsive_mobile_bottom_bar, #s5_responsive_mobile_top_bar {
background:#ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#ffffff 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#ffffff 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#ffffff 100%); /* W3C */
font-family: Roboto !important;
}
.s5_responsive_mobile_drop_down_inner, .s5_responsive_mobile_drop_down_inner input, .s5_responsive_mobile_drop_down_inner button, .s5_responsive_mobile_drop_down_inner .button, #s5_responsive_mobile_drop_down_search .validate {
font-family: Roboto !important;
}
.s5_responsive_mobile_drop_down_inner button:hover, .s5_responsive_mobile_drop_down_inner .button:hover {
background:#ffffff !important;
}
#s5_responsive_mobile_drop_down_menu, #s5_responsive_mobile_drop_down_menu a, #s5_responsive_mobile_drop_down_login a {
font-family: Roboto !important;
color:#333333 !important;
}
#s5_responsive_mobile_bar_active, #s5_responsive_mobile_drop_down_menu .current a, .s5_responsive_mobile_drop_down_inner .s5_mod_h3, .s5_responsive_mobile_drop_down_inner .s5_h3_first {
color:#333333 !important;
}
.s5_responsive_mobile_drop_down_inner button, .s5_responsive_mobile_drop_down_inner .button {
background:#333333 !important;
}
#s5_responsive_mobile_drop_down_menu .active ul li, #s5_responsive_mobile_drop_down_menu .current ul li a, #s5_responsive_switch_mobile a, #s5_responsive_switch_desktop a, #s5_responsive_mobile_drop_down_wrap {
color:#333333 !important;
}
#s5_responsive_mobile_toggle_click_menu span {
border-right:solid 1px #ffffff;
}
#s5_responsive_mobile_toggle_click_menu {
border-right:solid 1px #ffffff;
}
#s5_responsive_mobile_toggle_click_search span, #s5_responsive_mobile_toggle_click_register span, #s5_responsive_mobile_toggle_click_login span, #s5_responsive_mobile_scroll a {
border-left:solid 1px #ffffff;
}
#s5_responsive_mobile_toggle_click_search, #s5_responsive_mobile_toggle_click_register, #s5_responsive_mobile_toggle_click_login, #s5_responsive_mobile_scroll {
border-left:solid 1px #ffffff;
}
.s5_responsive_mobile_open, .s5_responsive_mobile_closed:hover, #s5_responsive_mobile_scroll:hover {
background:#ffffff;
}
#s5_responsive_mobile_drop_down_menu .s5_responsive_mobile_drop_down_inner, #s5_responsive_mobile_drop_down_register .s5_responsive_mobile_drop_down_inner, #s5_responsive_mobile_drop_down_login .s5_responsive_mobile_drop_down_inner, #s5_responsive_mobile_drop_down_search .s5_responsive_mobile_drop_down_inner {
background:#ffffff;
}
.s5_wrap {
max-width:1200px !important;
}
@media screen and (min-width:580px) and (max-width: 950px){
.s5_resize_top_row1 {
min-height: 0px !important;
}
#s5_top_row1 .s5_float_left {
width:100% !important;
}
}
@media screen and (min-width:580px) and (max-width: 950px){
.s5_resize_below_columns_inner {
min-height: 0px !important;
}
#s5_below_columns_inner .s5_float_left {
width:100% !important;
}
}
#s5_top_row2_area1 {
background-color:#FFFFFF !important;
background-image:url(http://www.shape5.com/demo/swapps/images/row2back.jpg) !important;
background-size: cover;
background-attachment: fixed !important;
background-repeat:repeat-y !important;
background-position:center center;
}
#s5_top_row3_area1 {
background:#25ade9 !important;
}
#s5_above_columns_wrap1 {
background-color:#FFFFFF !important;
background-image:url(http://shape5.com/demo/blue_group/images/pages_pricingback.jpg) !important;
background-size: 100% 100%;
background-attachment: scroll !important;
background-repeat:no-repeat !important;
background-position:top center;
}
#s5_bottom_row1_area1 {
background-color:#FFFFFF !important;
background-image:url(http://www.shape5.com/demo/swapps/images/row5back.jpg) !important;
background-size: cover;
background-attachment: fixed !important;
background-repeat:repeat-y !important;
background-position:top center;
}
#s5_bottom_row3_area1 {
background-color:#FFFFFF !important;
background-image:url(http://www.shape5.com/demo/swapps/images/row7back.jpg) !important;
background-size: cover;
background-attachment: fixed !important;
background-repeat:repeat-y !important;
background-position:top center;
}
#s5_menu_wrap.s5_wrap, #s5_menu_wrap.s5_wrap_fmfullwidth {
-moz-opacity: 1;
-khtml-opacity: 1;
filter:alpha(opacity=100);
opacity:1 !important;
}
.s5_wrap_fmfullwidth ul.menu {
width:92%;
margin:0 auto !important;
max-width:1200px;
}
#s5_menu_wrap.s5_wrap_fmfullwidth {
height:90px;
width:100% !important;
z-index:2;
position: fixed;
top:0px !important;
margin-top:0px !important;
left:0 !important;
margin-left:0px !important;
}
.subMenusContainer, .s5_drop_down_container {
position: fixed !important;
}
#s5_menu_wrap.s5_wrap {
height:90px;
position: fixed;
top:0px !important;
z-index:2;
margin-top:0px !important;
}
#s5_menu_wrap {
-webkit-transition: top 800ms ease-out;
-moz-transition: top 800ms ease-out;
-o-transition:top 800ms ease-out;
transition: top 800ms ease-out;
}
#s5_menu_wrap.s5_wrap_fmfullwidth, #s5_menu_wrap.s5_wrap {
top:0px;
}
#s5_menu_wrap.s5_wrap, #s5_menu_wrap.s5_wrap_fmfullwidth {
background: #ffffff !important; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 100%) !important; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ffffff)) !important; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%) !important; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#ffffff 100%) !important; /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#ffffff 100%) !important; /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#ffffff 100%) !important; /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ) !important; /* IE6-9 */
}
#s5_menu_wrap.s5_wrap, #s5_menu_wrap.s5_wrap_fmfullwidth {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, .2);
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
}
</style><script type="text/javascript">
jQuery(document).ready( function() {
if (window.addEventListener) {
window.addEventListener('scroll', s5_fm_check_scroll_height, false);
}
else if (window.attachEvent) {
window.attachEvent('onscroll', s5_fm_check_scroll_height);
}
window.setTimeout(s5_fm_check_scroll_height,100);
}
);
function s5_fm_check_scroll_height() {
if (window.pageYOffset >= (500 - document.getElementById("s5_menu_wrap").offsetHeight)){
document.getElementById("s5_menu_wrap").style.top = "-500px";}
else {
document.getElementById("s5_menu_wrap").style.top = "0px";
}
if (window.pageYOffset >= 500){
document.getElementById("s5_menu_wrap").className = 's5_wrap_fmfullwidth';
document.getElementById("subMenusContainer").className = 'subMenusContainer';
document.getElementById("s5_floating_menu_spacer").style.height = document.getElementById("s5_menu_wrap").offsetHeight + "px";
if (document.getElementById("s5_menu_wrap").parentNode.offsetHeight >= document.getElementById("s5_menu_wrap").offsetHeight - 20 && document.getElementById("s5_menu_wrap").parentNode.parentNode.offsetHeight >= document.getElementById("s5_menu_wrap"). offsetHeight - 20 && document.getElementById("s5_menu_wrap").parentNode.style.position != "absolute" && document.getElementById("s5_menu_wrap").parentNode.parentNode.style.position != "absolute") {
document.getElementById("s5_floating_menu_spacer").style.display = "block";
}
}
else {
document.getElementById("s5_menu_wrap").className = ''; document.getElementById("subMenusContainer").className = '';
document.getElementById("s5_floating_menu_spacer").style.display = "none";
}
}
</script>
<script type="text/javascript" src="https://www.shape5.com/demo/swapps/templates/swapps/js/s5_flex_menu.js"></script>
<link rel="stylesheet" href="https://www.shape5.com/demo/swapps/templates/swapps/css/s5_flex_menu.css" type="text/css" />
<link rel="stylesheet" href="https://www.shape5.com/demo/swapps/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="https://www.shape5.com/demo/swapps/templates/system/css/general.css" type="text/css" />
<link href="https://www.shape5.com/demo/swapps/templates/swapps/css/template_default.css" rel="stylesheet" type="text/css" />
<link href="https://www.shape5.com/demo/swapps/templates/swapps/css/template.css" rel="stylesheet" type="text/css" />
<link href="https://www.shape5.com/demo/swapps/templates/swapps/css/com_content.css" rel="stylesheet" type="text/css" />
<link href="https://www.shape5.com/demo/swapps/templates/swapps/css/editor.css" rel="stylesheet" type="text/css" />
<link href="https://www.shape5.com/demo/swapps/templates/swapps/css/thirdparty.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" />
<link href="https://www.shape5.com/demo/swapps/templates/swapps/css/multibox/multibox.css" rel="stylesheet" type="text/css" />
<link href="https://www.shape5.com/demo/swapps/templates/swapps/css/multibox/ajax.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://www.shape5.com/demo/swapps/templates/swapps/js/multibox/overlay.js"></script>
<script type="text/javascript" src="https://www.shape5.com/demo/swapps/templates/swapps/js/multibox/multibox.js"></script>
<link href="https://www.shape5.com/demo/swapps/templates/swapps/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<script type="text/javascript" src="https://www.shape5.com/demo/swapps/templates/swapps/js/s5_font_adjuster.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.shape5.com/demo/swapps/templates/swapps/css/s5_responsive_bars.css" />
<link href="https://www.shape5.com/demo/swapps/templates/swapps/css/s5_responsive_hide_classes.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://www.shape5.com/demo/swapps/templates/swapps/css/s5_responsive.css" />
<link rel="stylesheet" type="text/css" href="https://www.shape5.com/demo/swapps/templates/swapps/css/custom.css" /> <script type="text/javascript">
//<![CDATA[
jQuery(document).ready( function() {
var myMenu = new MenuMatic({
tabletWidth:1400,
effect:"slide & fade",
duration:500,
physics: 'easeOutCirc',
hideDelay:250,
orientation:"horizontal",
tweakInitial:{x:0, y:0},
direction:{ x: 'right', y: 'down' },
opacity:100 });
});
//]]>
</script>
<!-- Info Slide Script - Called in header so css validates -->
<link href="https://www.shape5.com/demo/swapps/templates/swapps/css/s5_info_slide.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://www.shape5.com/demo/swapps/templates/swapps/js/s5_info_slide.js"></script>
<script type="text/javascript" src="https://www.shape5.com/demo/swapps/templates/swapps/js/scrollReveal.min.js"></script>
<!-- Resize column function -->
<!-- File compression. Needs to be called last on this file -->
<!-- The excluded files, listed below the compressed php files, are excluded because their calls vary per device or per browser. Included compression files are only ones that have no conditions and are included on all devices and browsers. Otherwise unwanted css will compile in the compressed files. -->
<script>
function s5_ssearch_open() {document.getElementById('s5_search_overlay').className = "s5_ssearch_open";document.getElementById('s5_search_content').className = "s5_ssearch_open2";}
function s5_ssearch_close() {document.getElementById('s5_search_overlay').className = "s5_ssearch_close";document.getElementById('s5_search_content').className = "s5_ssearch_close";}
</script>
<script type="text/javascript">
window.addEvent('domready', function() { s5_check_header_scroll_height();
if(window.addEventListener) {window.addEventListener('scroll', s5_check_header_scroll_height, false);}
else if (window.attachEvent) {window.attachEvent('onscroll', s5_check_header_scroll_height); }
function s5_check_header_scroll_height() { if (document.getElementById("s5_menu_wrap").className == "s5_wrap_fmfullwidth"){ document.getElementById("s5_headertop").className = "s5_header_top_relative";}else {document.getElementById("s5_headertop").className = "s5_header_top_absolute";}}
});
</script>
<style type="text/css">
body, .inputbox, .button, a.readon, div.catItemReadMore, .userItemReadMore, div.catItemCommentsLink, .userItemCommentsLink, a.readmore-link, a.comments-link, div.itemCommentsForm form input#submitCommentButton, input.jm_inputfield, .MultiBoxControls, textarea, input, .recaptcha_theme_red #recaptcha_response_field, .validate, .btn-primary {font-family: 'Roboto',Helvetica,Arial,Sans-Serif ;}
/* k2 stuff */
div.itemHeader h2.itemTitle, div.catItemHeader h3.catItemTitle, h3.userItemTitle a, #comments-form p, #comments-report-form p, #comments-form span, #comments-form .counter, #comments .comment-author, #comments .author-homepage,
#comments-form p, #comments-form #comments-form-buttons, #comments-form #comments-form-error, #comments-form #comments-form-captcha-holder {font-family: 'Roboto',Helvetica,Arial,Sans-Serif ;}
a.k2ReadMore {background-color:#eeb934 !important;}
a.k2ReadMore:hover {background-color:#5badfa !important;}
.s5_wrap {width:92%;}
.jdGallery .slideInfoZone, .s5_wrap_fmfullwidth .s5_wrap_menu, #s5_ls_outer_wrap {max-width:1200px !important;}
#s5_nav li:hover span.s5_level1_span1, .s5_highlight, #s5_nav li.mainMenuParentBtnFocused span.s5_level1_span1, .s5_scrolltotop:hover, .button, .ourteam_roundimage_hover .ourteam_roundimage_inner, #s5_youtube:hover, #s5_pinterest:hover, #s5_fb:hover, #s5_twitter:hover, #s5_vimeo:hover, #s5_google:hover, #s5_rss:hover, li.pagenav-prev a, li.pagenav-next a, #s5_accordion_menu h3.s5_am_toggler.s5_am_open.s5_am_parent, .validate, .module_round_box-highlight2, #s5_responsive_mobile_drop_down_wrap button, #s5_responsive_mobile_drop_down_wrap .button, .pager a, button.btn, .btn, .icon_outer_wrap, .readmore a, .social_icon, a.readon, .ion-play-size, .circle_table_icons, #s5_is_leftarrow:hover, #s5_is_rightarrow:hover, #s5_login:hover, #s5_register:hover,
.site_logo_symbol, a.s5_ls_readmore, .jdGallery a.right:hover, .jdGallery a.left:hover, .s5_highlight1, .label-info, .badge-info{background-color:#eeb934 !important;}
.ac-container input + label:hover, .ac-container input:checked + label, .ac-container input:checked + label:hover, .ac-container2 input + label:hover, .ac-container2 input:checked + label, .ac-container2 input:checked + label:hover {background:#eeb934 !important;}
.s5_wrap_fmfullwidth .site_logo_text, #s5_footer_area2 .site_logo_text, .items-more a {color:#eeb934 !important;}
.circle_table {border:2px solid #eeb934 !important;}
#s5_is_leftarrow:hover, #s5_is_rightarrow:hover, .S5_submenu_item:hover, .jdGallery a.right:hover, .jdGallery a.left:hover {border:1px solid #eeb934 !important;}
#s5_pos_custom_1 a.readon:hover {background-color:#eeb934 !important;}
#s5_pos_custom_1 a.readon:hover, .inputbox:hover, .registration input:hover, .login input:hover, .contact-form input:hover, #jform_contact_message:hover, input:hover {border:1px solid #eeb934 !important;}
::selection {background:#eeb934;color:#fff; /* Safari */ }
::-moz-selection {background:#eeb934;color:#fff; /* Firefox */}
::-webkit-selection {background:#eeb934;color:#fff; /* Firefox */}
.button:hover, .s5_button:hover, .s5_highlight2, .s5_scrolltotop, a.readon:hover, p.readmore a:hover, .s5_is_css_wrap_7 .s5_is_css_hidden a.darkcolor:hover, li.pagenav-prev a:hover, li.pagenav-next a:hover, .s5_ls_search_word, #s5_ls_outer_wrap .s5_ls_readmore:hover, #s5_accordion_menu h3:hover, .validate:hover, .pages_highlight_box, .module_round_box-highlight1, #s5_responsive_mobile_drop_down_wrap button:hover, #s5_responsive_mobile_drop_down_wrap .button:hover, .pager a:hover, .btn:hover, .chzn-container .chzn-results li:hover, .icon_hover, .social_icon:hover, .ion-play-size:hover, .circle_table_icons:hover, .ac-container input:checked + label, .ac-container input:checked + label:hover, .ac-container2 input:checked + label, .ac-container2 input:checked + label:hover, .btn-primary, #searchForm .btn-toolbar .btn, .item-page .dropdown-menu li > a:hover, .blog .dropdown-menu li > a:hover, .item .dropdown-menu li > a:hover, .dropdown-menu .active > a:hover, .dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu .active > a, .nav-list > .active > a, .nav-list > .active > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover{ background-color:#5badfa !important;}
.code {border-left:solid 5px #5badfa;}
a.btn.dropdown-toggle:hover {border:solid 1px #eeb934 !important;}
#s5_pos_custom_1 .readon:hover span, #s5_bottom_menu_wrap ul.menu a:hover, .items-more a:hover { color:#5badfa !important;}
#s5_headerbackground {background-image:url(http://www.shape5.com/demo/swapps/images/iacf1.jpg) !important;}
#s5_nav li.mainMenuParentBtnFocused span.s5_level1_span1 {background-color:#eeb934 !important;}
#s5_menu_wrap, #s5_loginreg, .s5_search_wrap {margin-top: -158px;}
.s5_wrap_fmfullwidth #s5_menu_wrap, .s5_wrap_fmfullwidth #s5_loginreg, .s5_wrap_fmfullwidth .s5_search_wrap {margin-top: auto;}
#s5_nav li:first-child {display:none;}
#s5_nav li span.s5_level1_span2{border-bottom:2px solid transparent;}
#s5_nav li.active span.s5_level1_span2 {border-bottom:2px solid #5badfa;}
#s5_nav li.active:hover span.s5_level1_span2, #s5_nav li.mainMenuParentBtnFocused span.s5_level1_span2 {border-bottom:2px solid transparent;}
</style>
</head>
<body id="s5_body" style="font-size: 1em;">
<div id="s5_scrolltotop"></div>
<!-- Top Vertex Calls -->
<!-- Call mobile sidebar -->
<div id="s5_responsive_mobile_sidebar" class="s5_responsive_mobile_sidebar_hide_ltr">
<div id="s5_responsive_mobile_sidebar_inner1" class="s5_responsive_mobile_sidebar_dark" style="width: 1079.2px;">
<div id="s5_responsive_mobile_sidebar_inner2">
<div id="s5_responsive_mobile_sidebar_search_wrap">
<div id="s5_responsive_mobile_sidebar_search_wrap_inner1">
<div id="s5_responsive_mobile_sidebar_search_wrap_inner2">
<form method="post" action="http://www.shape5.com/demo/swapps/">
<input type="text" onfocus="if (this.value=='Search...') this.value='';" onblur="if (this.value=='') this.value='Search...';" value="Search..." id="s5_responsive_mobile_search" name="searchword">
<input type="hidden" value="search" name="task">
<input type="hidden" value="com_search" name="option">
<input type="hidden" value="1" name="Itemid">
</form>
</div>
</div>
</div>
<div style="clear:both"></div>
<div id="s5_pos_sidebar_top">
<div class="module_round_box_outer">
<div class="module_round_box-sidebar">
<div class="s5_module_box_1">
<div class="s5_module_box_2">
<div class="s5_mod_h3_outer">
<h3 class="s5_mod_h3">
<span class="s5_h3_first">Sample </span><span class="s5_h3_last"> Sidebar Module</span>
</h3>
</div>
<div style="clear:both"></div>
<div class="s5_outer-sidebar">
<div class="custom-sidebar">
This is a sample module published to the sidebar_top position, using the -sidebar module class suffix. There is also a sidebar_bottom position below the menu.</div>
</div>
<div style="clear:both; height:0px"></div>
</div>
</div>
</div>
</div>
</div>
<div id="s5_responsive_mobile_sidebar_login_register_wrap">
<div id="s5_responsive_mobile_sidebar_login_wrap" class="s5_responsive_mobile_sidebar_inactive" style="display:none">
<div class="s5_responsive_mobile_sidebar_title_wrap" id="s5_responsive_mobile_sidebar_title_wrap_login" onclick="s5_responsive_mobile_sidebar_login()">
<div class="s5_responsive_mobile_sidebar_title_wrap_inner">
<span class="s5_responsive_mobile_sidebar_title_wrap_inner">
Login </span>
</div>
</div>
<div id="s5_responsive_mobile_sidebar_login_bottom" class="s5_responsive_mobile_sidebar_login_inactive">
</div>
<div style="clear:both"></div>
</div>
<div style="clear:both"></div>
</div>
<div id="s5_responsive_mobile_sidebar_menu_wrap">
<!--<ul class="menu">-->
<h3><span><a class="s5_mobile_sidebar_active" href="http://www.shape5.com/demo/swapps/index.php">Home</a></span></h3><h3 onclick="s5_responsive_mobile_sidebar_h3_click(this.id)"><span class="s5_sidebar_deeper"><a href="javascript:;">Pages</a></span></h3><div class="s5_responsive_mobile_sidebar_sub"><!--<span class="separator">Pages</span>-->
<span>Pages</span><ul><li><a href="http://www.shape5.com/demo/swapps/index.php/pages/contact-us">Contact Us</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/pages/search">Search</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/pages/links">Links</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/pages/wrapper">Wrapper</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/pages/about-us">About Us</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/pages/news">Category Blog</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/pages/our-services">Our Services</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/pages/404-error">404 Error</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/pages/pricing-table">Pricing Table</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/pages/faqs">FAQs</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/pages/team">Team</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/pages/portfolio">Portfolio</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/pages/circle-callout-table">Circle Callout Table</a></li></ul></div><h3 onclick="s5_responsive_mobile_sidebar_h3_click(this.id)"><span class="s5_sidebar_deeper"><a href="javascript:;">Extensions</a></span></h3><div class="s5_responsive_mobile_sidebar_sub"><!--<span class="separator">Extensions</span>-->
<span>Extensions</span><ul><li><a href="http://www.shape5.com/demo/swapps/index.php/extensions/s5-image-and-content-fader-v3">S5 Image and Content Fader v3</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/extensions/s5-accordion-menu">S5 Accordion Menu</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/extensions/s5-box">S5 Box</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/extensions/s5-flex-menu">S5 Flex Menu</a><ul><li><a href="javascript:;"><img src="http://www.shape5.com/demo/swapps/images/stories/application_put.png" alt="Drop Down Menu"><span>Drop Down Menu</span> </a><ul><li><a href="javascript:;">Dummy Item</a></li><li><a href="javascript:;">Dummy Item </a></li><li><a href="javascript:;">Dummy Item </a><ul><li><a href="javascript:;">Dummy Item</a></li><li><a href="javascript:;">Dummy Item </a></li><li><a href="javascript:;">Dummy Item </a></li></ul></li></ul></li><li><!--<span class="separator"><img src="http://www.shape5.com/demo/swapps/images/stories/cog_edit.png" alt="Menu Module Example" /><span>Menu Module Example</span> </span>-->
<span><img src="http://www.shape5.com/demo/swapps/images/stories/cog_edit.png" alt="Menu Module Example"><span>Menu Module Example</span> </span></li><li><!--<span class="separator"><img src="http://www.shape5.com/demo/swapps/images/stories/application_side_boxes.png" alt="Grouped Child Menu" /><span>Grouped Child Menu</span> </span>-->
<span><img src="http://www.shape5.com/demo/swapps/images/stories/application_side_boxes.png" alt="Grouped Child Menu"><span>Grouped Child Menu</span> </span><ul><li><!--<span class="separator">Dummy Sample Link</span>-->
<span>Dummy Sample Link</span></li><li><!--<span class="separator">Dummy Sample Link </span>-->
<span>Dummy Sample Link </span></li><li><!--<span class="separator">Dummy Sample Link </span>-->
<span>Dummy Sample Link </span></li><li><!--<span class="separator">Dummy Sample Link </span>-->
<span>Dummy Sample Link </span></li><li><!--<span class="separator">Dummy Sample Link </span>-->
<span>Dummy Sample Link </span></li><li><!--<span class="separator">Dummy Sample Link</span>-->
<span>Dummy Sample Link</span></li></ul></li><li><!--<span class="separator">Menu With No Menu Icon</span>-->
<span>Menu With No Menu Icon</span></li></ul></li><li><a href="http://www.shape5.com/demo/swapps/index.php/extensions/s5-tab-show">S5 Tab Show</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/extensions/s5-image-and-content-fader">S5 Image and Content Fader</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/extensions/s5-map-it-with-google">S5 Map it With Google</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/extensions/s5-live-search">S5 Live Search</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/extensions/s5-mailchimp-signup">S5 MailChimp Signup </a></li></ul></div><h3 onclick="s5_responsive_mobile_sidebar_h3_click(this.id)"><span class="s5_sidebar_deeper"><a href="javascript:;">Features</a></span></h3><div class="s5_responsive_mobile_sidebar_sub"><!--<span class="separator">Features</span>-->
<span>Features</span><ul><li><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-specific-features"><img src="http://www.shape5.com/demo/swapps/images/stories/color_wheel.png" alt="Template Specific Features"><span>Template Specific Features</span> </a></li><li><!--<span class="separator"><img src="http://www.shape5.com/demo/swapps/images/stories/application_split.png" alt="Vertex Template Features" /><span>Vertex Template Features</span> </span>-->
<span><img src="http://www.shape5.com/demo/swapps/images/stories/application_split.png" alt="Vertex Template Features"><span>Vertex Template Features</span> </span><ul><li><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-features/responsive-layout">Responsive Layout</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-features/hide-content-and-modules">Hide Content and Modules</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-features/info-slide-enabled">Info Slide Enabled</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-features/96-module-positions">96 Module Positions</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-features/seo-optimized">SEO Optimized</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-features/mobile-device-ready">Mobile Device Ready</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-features/tool-tips-enabled">Tool Tips Enabled</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-features/multibox-enabled">Multibox Enabled</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-features/lazy-load-enabled">Lazy Load Enabled</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-features/menu-scroll-to">Menu Scroll To</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-features/hide-article-component-area">Hide Article Component Area</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-features/parallax-backgrounds">Parallax Backgrounds</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-features/drop-down-panel">Drop Down Panel</a></li></ul></li><li><a href="http://www.shape5.com/joomla/framework/vertex_framework.html"><img src="http://www.shape5.com/demo/swapps/images/stories/application_link.png" alt="S5 Vertex Framework"><span>S5 Vertex Framework</span> </a></li><li><!--<span class="separator"><img src="http://www.shape5.com/demo/swapps/images/stories/application_view_tile.png" alt="Continued Vertex Features" /><span>Continued Vertex Features</span> </span>-->
<span><img src="http://www.shape5.com/demo/swapps/images/stories/application_view_tile.png" alt="Continued Vertex Features"><span>Continued Vertex Features</span> </span><ul><li><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/file-compression">File Compression</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/stock-photography">Stock Photography</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/site-shaper-available">Site Shaper Available</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/google-fonts-enabled">Google Fonts Enabled</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/page-row-and-column-widths">Page, Row and Column Widths</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/typography">Typography</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/fluid-and-fixed-layouts">Fluid and Fixed Layouts</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/fixed-side-tabs">Fixed Side Tabs</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/3rd-party-component-compatible">3rd Party Component Compatible</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/floating-menu">Floating Menu</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/scroll-reveal">Scroll Reveal</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/ion-icons-integrated">Ion Icons Integrated</a></li><li><a href="http://www.shape5.com/demo/swapps/?lang=ltr">LTR Language</a></li><li><a href="http://www.shape5.com/demo/swapps/?lang=rtl">RTL Language</a></li></ul></li></ul></div><h3 onclick="s5_responsive_mobile_sidebar_h3_click(this.id)"><span class="s5_sidebar_deeper"><a href="javascript:;">Tutorials</a></span></h3><div class="s5_responsive_mobile_sidebar_sub"><!--<span class="separator">Tutorials</span>-->
<span>Tutorials</span><ul><li><a href="http://www.shape5.com/joomla_tutorials.html"><img src="http://www.shape5.com/demo/swapps/images/stories/help.png" alt="Joomla and Vertex Tutorials"><span>Joomla and Vertex Tutorials</span> </a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/tutorials-menu-48/site-shaper-setup">Site Shaper Setup</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/tutorials-menu-48/installing-the-template">Installing The Template</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/tutorials-menu-48/setting-up-module-styles">Setting Up Module Styles</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/tutorials-menu-48/configuring-the-template">Configuring The Template</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/tutorials-menu-48/search-and-menus-setup">Search and Menus Setup</a></li><li><a href="http://www.shape5.com/demo/swapps/index.php/tutorials-menu-48/s5-login-and-register-setup">S5 Login and Register Setup</a></li></ul></div><h3 onclick="s5_responsive_mobile_sidebar_h3_click(this.id)"><span class="s5_sidebar_deeper"><a href="http://www.shape5.com/demo/swapps/#">Style</a></span></h3><div class="s5_responsive_mobile_sidebar_sub"><a href="http://www.shape5.com/demo/swapps/#">Style</a><ul><li><a href="http://www.shape5.com/demo/swapps/?theme=dark">Dark Style</a></li><li><a href="http://www.shape5.com/demo/swapps/?theme=light">Light Style</a></li></ul></div><!--</ul>-->
</div>
<div id="s5_pos_sidebar_bottom">
<div class="module_round_box_outer">
<div class="module_round_box-sidebar">
<div class="s5_module_box_1">
<div class="s5_module_box_2">
<div class="s5_mod_h3_outer">
<h3 class="s5_mod_h3">
<span class="s5_h3_first">Sample </span><span class="s5_h3_last"> Sidebar Module</span>
</h3>
</div>
<div style="clear:both"></div>
<div class="s5_outer-sidebar">
<div class="custom-sidebar">
This is a sample module published to the sidebar_bottom position, using the -sidebar module class suffix. There is also a sidebar_top position below the search.</div>
</div>
<div style="clear:both; height:0px"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="s5_responsive_mobile_sidebar_body_wrap">
<div id="s5_responsive_mobile_sidebar_body_wrap_inner">
<!-- Call top bar for mobile devices if layout is responsive -->
<!-- s5_responsive_mobile_top_bar_spacer must be called to keep a space at the top of the page since s5_responsive_mobile_top_bar_wrap is position absolute. -->
<div id="s5_responsive_mobile_top_bar_spacer"></div>
<!-- s5_responsive_mobile_top_bar_wrap must be called off the page and not with display:none or it will cause issues with the togglers. -->
<div id="s5_responsive_mobile_top_bar_wrap" style="margin-top:-50000px;position:absolute;z-index:20;top:0px">
<div id="s5_responsive_mobile_top_bar" onclick="s5_responsive_mobile_sidebar()" class="s5_responsive_mobile_bar_dark">
<div id="s5_responsive_mobile_toggle_click_menu">
<span></span>
</div>
<div id="s5_responsive_mobile_bar_active">
<span>
Home </span>
</div>
<div style="clear:both;height:0px"></div>
</div>
</div>
<script language="JavaScript" type="text/javascript">
var s5_responsive_layout = "sidebar";
var s5_responsive_layout_direction = "_ltr";
var s5_responsive_menu_auto_open = "open";
</script>
<script type="text/javascript" language="javascript" src="https://www.shape5.com/demo/swapps/templates/swapps/js/s5_responsive_mobile_bar.js"></script>
<!-- Fixed Tabs -->
<!-- Drop Down -->
<!-- Parallax Backgrounds -->
<script type="text/javascript">//<![CDATA[
var s5_load_parallax_scroll_speed = 7.0;
function s5_check_parallax_scroll(s5_parallax_element,s5_parallax_position) {
if (document.getElementById(s5_parallax_element)) {
//Detect elements that are view when page loads so that they start at background-position:0 0
if (document.getElementById(s5_parallax_element).offsetTop <= window.innerHeight) {
document.getElementById(s5_parallax_element).style.backgroundPosition = s5_parallax_position + (((window.pageYOffset + document.getElementById(s5_parallax_element).offsetTop) - (document.getElementById(s5_parallax_element).offsetTop)) / s5_load_parallax_scroll_speed)*-1 + "px";
}
//Detect elements that are outside of the viewable area so they do not start scrolling until they come into view
else {
if ((window.pageYOffset + window.innerHeight >= document.getElementById(s5_parallax_element).offsetTop) && (window.pageYOffset <= (document.getElementById(s5_parallax_element).offsetTop + document.getElementById(s5_parallax_element).offsetHeight))) {
document.getElementById(s5_parallax_element).style.backgroundPosition = s5_parallax_position + (((window.pageYOffset + window.innerHeight) - (document.getElementById(s5_parallax_element).offsetTop)) / s5_load_parallax_scroll_speed)*-1 + "px";
}
}
}
}
jQuery(document).ready( function() {
function s5_parallax_scroll_handler() {
s5_check_parallax_scroll("s5_top_row2_area1","50% ");
s5_check_parallax_scroll("s5_bottom_row1_area1","50% ");
s5_check_parallax_scroll("s5_bottom_row3_area1","50% ");
}
s5_parallax_scroll_handler();
if(window.addEventListener) {
window.addEventListener('scroll', s5_parallax_scroll_handler, false);
window.addEventListener('resize', s5_parallax_scroll_handler, false);
}
else if (window.attachEvent) {
window.attachEvent('onscroll', s5_parallax_scroll_handler);
window.attachEvent('onresize', s5_parallax_scroll_handler);
}
});
//]]></script>
<!-- Floating Menu Spacer -->
<div id="s5_floating_menu_spacer" style="display: none; width: 100%;"></div>
<!-- Body Padding Div Used For Responsive Spacing -->
<div id="s5_body_padding">
<div id="s5_search_overlay" class="s5_ssearch_close"></div>
<div id="s5_search_content" class="s5_ssearch_close">
<div class="ion-ios7-close-empty icon_search_close" onclick="s5_ssearch_close()"></div>
<div class="s5_wrap">
<div style="clear:both; height:0px"></div>
<div id="s5_search_wrap">
<div class="module_round_box_outer">
<div class="module_round_box">
<div class="s5_module_box_1">
<div class="s5_module_box_2">
<div class="s5_mod_h3_outer">
<h3 class="s5_mod_h3">
<span class="s5_h3_first">Search </span><span class="s5_h3_last"> Our Site</span>
</h3>
</div>
<div style="clear:both"></div>
<div class="s5_outer">
<script type="text/javascript">//<![CDATA[
document.write('<link href="http://www.shape5.com/demo/swapps/modules/mod_s5_live_search/css/s5_ls.css" rel="stylesheet" type="text/css" media="screen" />');
//]]></script><link href="https://www.shape5.com/demo/swapps/modules/mod_s5_live_search/css/s5_ls.css" rel="stylesheet" type="text/css" media="screen">
<form name="s5_search_form" id="s5_search_form" action="http://www.shape5.com/demo/swapps/" method="get">
<div class="search">
<input name="searchword" id="mod-search-searchword" maxlength="20" alt="Search" class="inputbox" type="text" size="20" value="Search..." onblur="if(this.value=='') this.value='Search...';" onfocus="if(this.value=='Search...') this.value='';" onkeyup="s5AjaxSearch();">
<span>
<div alt="" style="background:url(http://www.shape5.com/demo/swapps/modules/mod_s5_live_search/images/loading.gif) no-repeat; display:none; margin-left:185px; margin-top:-28px; height:14px;width:16px" id="loading_img"></div>
</span><input type="submit" value="Search" class="button" onclick="this.form.searchword.focus();"> </div>
<input type="hidden" name="searchphrase" value="any">
<input type="hidden" name="limit" id="s5_live_search_limit" value="">
<input type="hidden" name="ordering" value="newest">
<input type="hidden" name="view" value="search">
<input type="hidden" name="Itemid" value="99999999">
<input type="hidden" name="option" value="com_search">
</form>
<div id="s5_ls_outer_wrap" style="margin-top:5px; margin-right:352px; margin-bottom:10px; margin-left:0px; border:solid 1px #9F9E9E; opacity:.0; display:none; width: 400px;"></div>
<div id="search_tmpdiv" style="visibility:hidden;display:none;"></div>
<script type="text/javascript" language="javascript">//<![CDATA[
var limit = '5';
var ordering = 'newest';
var searchPhrase = 'any';
function closeResultDiv() {
var outerWrap = document.getElementById('s5_ls_outer_wrap');
outerWrap.innerHTML = '';
opacity_s5_ls('s5_ls_outer_wrap', 100, 0, 500);
outerWrap.style.display = "none";
document.getElementById('search_tmpdiv').innerHTML = "";
}
function openResultDiv() {
opacity_s5_ls('s5_ls_outer_wrap', 0, 100, 500);
document.getElementById("s5_ls_outer_wrap").style.display = "block";
document.getElementById('search_tmpdiv').innerHTML = "";
}
function s5AjaxSearch() {
var curtime = new Date();
var url = 'index2.php';
if(document.getElementById('mod-search-searchword').value == ''){
closeResultDiv();
}
else{
var inputTag = document.getElementById('mod-search-searchword');
if (inputTag.value.length < 3) {
return ;
}
closeResultDiv();
//Show the loading icon
var loadingImgTag = document.getElementById('loading_img') ;
loadingImgTag.style.display = '';
//Build the url
var url = 'http://www.shape5.com/demo/swapps/' + 'index.php?option=com_search' ;
url = url + '&view=search';
url = url + '&layout=s5_live_search';
url = url + '&searchphrase=' + searchPhrase;
url = url + '&ordering=' + ordering;
url = url + '&limit=' + limit;
url = url + '&searchword=' + document.getElementById('mod-search-searchword').value ;
//url = url + '&limit=' + limit;
//url = url + '&results_text=' + 'Search Results - Click Here For Full Results';
//url = url + '&no_results_text=' + 'No results found';
url = url + '&r=' + curtime.getTime();
jx.load(url, function (data) {
document.getElementById('loading_img').style.display = 'none' ;
document.getElementById('search_tmpdiv').innerHTML = data ;
document.getElementById('s5_ls_outer_wrap').innerHTML = document.getElementById('s5_search_results').innerHTML;;
openResultDiv();
}
) ;
}
}
//]]></script>
</div>
<div style="clear:both; height:0px"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="s5_headertop" class="s5_header_top_absolute">
<div id="s5_headertop_inner">
<div class="s5_wrap">
<div class="s5_logo_module" onclick="window.document.location.href='http://www.shape5.com/demo/swapps/'">
<div class="moduletable">
<div class="custom">
<div class="site_logo_symbol">S</div><span class="site_logo_text">WAPPS</span>
<div class="clear:both;"></div></div>
</div>
</div>
<div class="s5_search_wrap">
<div class="ion-ios7-search-strong icon_searchdrop" onclick="s5_ssearch_open()"></div>
</div>
<div id="s5_loginreg">
<div id="s5_logregtm">
<div id="s5_login" class="s5box_login cboxElement">
Login </div>
</div>
</div>
<div id="s5_menu_wrap" class="" style="top: 0px;">
<div id="s5_menu_inner" class="s5_wrap_menu">
<div class="s5_logo_module" onclick="window.document.location.href='http://www.shape5.com/demo/swapps/'">
<div class="moduletable">
<div class="custom">
<div class="site_logo_symbol">S</div><span class="site_logo_text">WAPPS</span>
<div class="clear:both;"></div></div>
</div>
</div>
<ul id="s5_nav" class="menu"><li class="active mainMenuParentBtn"><span class="s5_level1_span1"><span class="s5_level1_span2"><a href="http://www.shape5.com/demo/swapps/index.php"><span onclick="window.document.location.href="/demo/swapps/index.php"">Home</span></a></span></span></li><li class="mainMenuParentBtn mainParentBtn"><span class="s5_level1_span1"><span class="s5_level1_span2"><a href="javascript:;"><span onclick="window.document.location.href="javascript:;"">Pages</span></a></span></span></li><li class="mainMenuParentBtn mainParentBtn"><span class="s5_level1_span1"><span class="s5_level1_span2"><a href="javascript:;"><span onclick="window.document.location.href="javascript:;"">Extensions</span></a></span></span></li><li class="mainMenuParentBtn mainParentBtn"><span class="s5_level1_span1"><span class="s5_level1_span2"><a href="javascript:;"><span onclick="window.document.location.href="javascript:;"">Features</span></a></span></span></li><li class="mainMenuParentBtn mainParentBtn"><span class="s5_level1_span1"><span class="s5_level1_span2"><a href="javascript:;"><span onclick="window.document.location.href="javascript:;"">Tutorials</span></a></span></span></li><li class="mainMenuParentBtn mainParentBtn"><span class="s5_level1_span1"><span class="s5_level1_span2"><a href="http://www.shape5.com/demo/swapps/#"><span onclick="window.document.location.href="#"">Style</span></a></span></span></li></ul>
<div id="s5_rightside_options">
<div class="s5_search_wrap">
<div class="ion-ios7-search-strong icon_searchdrop" onclick="s5_ssearch_open()"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="s5_pos_custom_1">
<div class="moduletable">
<script type="text/javascript">//<![CDATA[
document.write('<link href="http://www.shape5.com/demo/swapps/modules/mod_s5_image_and_content_fader/css/s5imagecontent.css" rel="stylesheet" type="text/css" media="screen" />');
//]]></script><link href="https://www.shape5.com/demo/swapps/modules/mod_s5_image_and_content_fader/css/s5imagecontent.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript">
function s5_icfstartGallery() {
document.getElementById("s5_iacf_content_wrap").style.display = 'block';
window.myGallery = new gallery(jQuery('#myGallery'), {
timed: true,
showArrows: true,
showCarousel: false,
showInfopane: true,
slideShowDuration:1000,
slideHideDuration:500,
fadeDuration:500,
delay: 8000,
defaultTransition: "fade"
});
jQuery('#myGallery').bind('mouseover',function(){window.myGallery.clearTimer();});
jQuery('#myGallery').bind('mouseout',function(){window.myGallery.prepareTimer();});
}
function s5_icfstartGalleryload() {
s5_icfstartGallery();}
window.setTimeout(s5_icfstartGalleryload,400);
</script>
<div class="content " style="position:relative;z-index:0">
<div id="myGallery" style="width: 100%; display: block; background: rgb(255, 255, 255);" class="jdGallery withArrows">
<div id="myGallery_height">
<img id="myGallery_height_img" alt="" src="http://www.shape5.com/demo/swapps/images/iacf1.jpg">
</div>
<div id="s5_iacf_content_wrap" style="display: block;">
</div>
<a class="open" href="javascript:;" title="" style="display: block;"></a><div class="slideElement active" style="position: absolute; left: 0px; right: 0px; margin: 0px; padding: 0px; opacity: 1; background-image: url(http://www.shape5.com/demo/swapps/images/iacf1.jpg); background-position: 50% 50%;"></div><div class="slideElement" style="position: absolute; left: 0px; right: 0px; margin: 0px; padding: 0px; opacity: 0; background-position: 50% 50%;"></div><div class="slideElement" style="position: absolute; left: 0px; right: 0px; margin: 0px; padding: 0px; opacity: 0; background-position: 50% 50%;"></div><a class="left"></a><a class="right"></a><div class="loadingElement" style="display: none;"></div><div class="slideInfoZone slideInfoZone_load" style="opacity: 1; height: 275px;"><h2></h2><p><span class="left">
<span class="slide_title">
Get your work done
like never before
with Swapps
</span>
<span class="slide_text">
<br>
Available for download on the App Store and Play Store
</span>
<br>
<a class="readon" style="margin-right:45px;" href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-specific-features"><span class="ion-social-apple icon_phones"></span> App Store</a>
<a class="readon" href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-specific-features"><span class="ion-social-android icon_phones"></span> Play Store</a>
</span>
<span class="right">
<img alt="" src="http://www.shape5.com/demo/swapps/images/iacf1_pic.png">
</span></p></div></div>
</div>
<script type="text/javascript">//<![CDATA[
document.write('<style>.jdGallery .slideElement {background-size:100% auto;}@media screen and (max-width: 1900px) {#myGallery { height:700px !important; } .jdGallery .slideElement {background-size:auto auto !important;}}</style>');
//]]></script><style>.jdGallery .slideElement {background-size:100% auto;}@media screen and (max-width: 1900px) {#myGallery { height:700px !important; } .jdGallery .slideElement {background-size:auto auto !important;}}</style>
</div>
<div style="clear:both; height:0px"></div>
<div class="icon_scrolldown">
<span class="ion-mouse icon_scrolldown_ico"></span>
<span class="ion-ios7-arrow-down icon_arrow_ico"></span>
</div>
</div>
<!-- Top Row1 -->
<div id="s5_top_row1_area1">
<div id="s5_top_row1_area2">
<div id="s5_top_row1_area_inner" class="s5_wrap">
<div id="s5_top_row1_wrap">
<div id="s5_top_row1">
<div id="s5_top_row1_inner">
<div id="s5_pos_top_row1_1" class="s5_float_left" style="width:100%">
<div class="module_round_box_outer">
<div class="module_round_box-bigtitle_dark">
<div class="s5_module_box_1">
<div class="s5_module_box_2">
<div class="s5_mod_h3_outer">
<h3 class="s5_mod_h3">
<span class="s5_h3_first">Great </span><span class="s5_h3_last"> Features</span>
</h3>
</div>
<div style="clear:both"></div>
<div class="s5_outer-bigtitle_dark">
<div class="custom-bigtitle_dark">
<center>You can call out and highlight the three best features of your App here</center>
<br><br><br><br>
<div class="services_wrap" data-scroll-reveal="enter left and move 250px over 0.6s" data-scroll-reveal-id="1" style="-webkit-transform: translatex(-250px);transform: translatex(-250px);opacity: 0;" data-scroll-reveal-initialized="true">
<div class="services_wrap_inner">
<div class="icon_outer_wrap">
<div class="icon_hover">
<a class="ion-link icon_element" href="javascript:;"></a>
</div>
<div class="icon_non_hover">
<span class="ion-ios7-time-outline icon_element"></span>
</div>
</div>
<h3>Stay on Time</h3>
Phasellus porttitor gravida viverra. Vestibulum mattis in tellus ut semper. Etiam sodales, enim quis euismod rutrum, turpis lacus suscipit erat, eget interdum mauris nulla maximus purus. Praesent ornare bib endum sem id convallis. Vestibulum mattis in tellus ut semper.
<br>
</div>
</div>
<div class="services_wrap" data-scroll-reveal="enter bottom and move 250px up 0.6s" data-scroll-reveal-id="2" style="-webkit-transform: translatey(250px);transform: translatey(250px);opacity: 0;" data-scroll-reveal-initialized="true">
<div class="services_wrap_inner">
<div class="icon_outer_wrap">
<div class="icon_hover">
<a class="ion-link icon_element" href="javascript:;"></a>
</div>
<div class="icon_non_hover">
<span class="ion-ios7-unlocked-outline icon_element"></span>
</div>
</div>
<h3>Unlocked Potential</h3>
Phasellus porttitor gravida viverra. Vestibulum mattis in tellus ut semper. Etiam sodales, enim quis euismod rutrum, turpis lacus suscipit erat, eget interdum mauris nulla maximus purus. Praesent ornare bib endum sem id convallis. Vestibulum mattis in tellus ut semper.
<br>
</div>
</div>
<div class="services_wrap" data-scroll-reveal="enter right and move 250px over 0.6s" data-scroll-reveal-id="3" style="-webkit-transform: translatex(250px);transform: translatex(250px);opacity: 0;" data-scroll-reveal-initialized="true">
<div class="services_wrap_inner lastone">
<div class="icon_outer_wrap">
<div class="icon_hover">
<a class="ion-link icon_element" href="javascript:;"></a>
</div>
<div class="icon_non_hover">
<span class="ion-ios7-cloud-outline icon_element"></span>
</div>
</div>
<h3>Cloud Technology</h3>
Phasellus porttitor gravida viverra. Vestibulum mattis in tellus ut semper. Etiam sodales, enim quis euismod rutrum, turpis lacus suscipit erat, eget interdum mauris nulla maximus purus. Praesent ornare bib endum sem id convallis. Vestibulum mattis in tellus ut semper.
<br>
</div>
</div></div>
</div>
<div style="clear:both; height:0px"></div>
</div>
</div>
</div>
</div>
</div>
<div style="clear:both; height:0px"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Top Row1 -->
<!-- Top Row2 -->
<div id="s5_top_row2_area1">
<div id="s5_top_row2_area2">
<div id="s5_top_row2_area_inner" class="s5_wrap">
<div id="s5_top_row2_wrap">
<div id="s5_top_row2">
<div id="s5_top_row2_inner">
<div id="s5_pos_top_row2_1" class="s5_float_left" style="width:100%">
<div class="module_round_box_outer hide_580">
<div class="module_round_box-bigtitle_light">
<div class="s5_module_box_1">
<div class="s5_module_box_2">
<div class="s5_mod_h3_outer">
<h3 class="s5_mod_h3">
<span class="s5_h3_first">Specific </span><span class="s5_h3_last"> Features </span>
</h3>
</div>
<div style="clear:both"></div>
<div class="s5_outer-bigtitle_light">
<div class="custom-bigtitle_light">
<center>You can call out and highlight specific features of your App here with popup screenshots.</center>
<br><br><br><br><br>
<div class="circle_table_outer white" style="margin-bottom: -408px;">
<div class="circle_table">
<div class="circle_table_inner">
<div class="circle_table_icons top" data-scroll-reveal="enter bottom and move 50px up 0.5s" data-scroll-reveal-id="4" style="-webkit-transform: translatey(50px);transform: translatey(50px);opacity: 0;" data-scroll-reveal-initialized="true">
<a rel="[me]" href="http://www.shape5.com/demo/swapps/images/imageslide3_lrg.jpg" id="mb11" class="s5mb" title="Image Screenshot">
<span class="ion-ios7-upload-outline circle_icon_size"></span>
</a>
<span class="circle_table_text">Upload Capable</span>
</div>
<div class="circle_table_icons left1" data-scroll-reveal="enter left and move 50px over 0.6s" data-scroll-reveal-id="5" style="-webkit-transform: translatex(-50px);transform: translatex(-50px);opacity: 0;" data-scroll-reveal-initialized="true">
<a rel="[me]" href="http://www.shape5.com/demo/swapps/images/imageslide2_lrg.jpg" id="mb12" class="s5mb" title="Image Screenshot">
<span class="ion-ios7-checkmark-outline circle_icon_size"></span>
</a>
<span class="circle_table_left_text">Auto Updates</span>
</div>
<div class="circle_table_icons left2" data-scroll-reveal="enter left and move 100px over 0.7s" data-scroll-reveal-id="6" style="-webkit-transform: translatex(-100px);transform: translatex(-100px);opacity: 0;" data-scroll-reveal-initialized="true">
<a rel="[me]" href="http://www.shape5.com/demo/swapps/images/imageslide1_lrg.jpg" id="mb13" class="s5mb" title="Image Screenshot">
<span class="ion-ios7-cog-outline circle_icon_size"></span>
</a>
<span class="circle_table_left_text">Extremely Flexible</span>
</div>
<div class="circle_table_icons right1" data-scroll-reveal="enter right and move 50px over 0.6s" data-scroll-reveal-id="7" style="-webkit-transform: translatex(50px);transform: translatex(50px);opacity: 0;" data-scroll-reveal-initialized="true">
<span class="circle_table_right_text">Cloud Technology</span>
<a rel="[me]" href="http://www.shape5.com/demo/swapps/images/imageslide3_lrg.jpg" id="mb14" class="s5mb" title="Image Screenshot">
<span class="ion-ios7-cloud-outline circle_icon_size"></span>
</a>
</div>
<div class="circle_table_icons right2" data-scroll-reveal="enter right and move 100px over 0.7s" data-scroll-reveal-id="8" style="-webkit-transform: translatex(100px);transform: translatex(100px);opacity: 0;" data-scroll-reveal-initialized="true">
<span class="circle_table_right_text">Multi Profiled</span>
<a rel="[me]" href="http://www.shape5.com/demo/swapps/images/imageslide2_lrg.jpg" id="mb15" class="s5mb" title="Image Screenshot">
<span class="ion-ios7-people-outline circle_icon_size"></span>
</a>
</div>
<img src="http://www.shape5.com/demo/swapps/images/phone1.png" alt="phone1" class="circle_table_phone" data-scroll-reveal="enter bottom and move 150px up 0.7s" data-scroll-reveal-id="9" style="-webkit-transform: translatey(150px);transform: translatey(150px);opacity: 0;" data-scroll-reveal-initialized="true">
<div class="circle_table_backgroundcover"></div>
</div>
</div>
</div>
</div>
</div>
<div style="clear:both; height:0px"></div>
</div>
</div>
</div>
</div>
</div>
<div style="clear:both; height:0px"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Top Row2 -->
<!-- Top Row3 -->
<div id="s5_top_row3_area1">
<div id="s5_top_row3_area2">
<div id="s5_top_row3_area_inner" class="s5_wrap">
<div id="s5_top_row3_wrap">
<div id="s5_top_row3">
<div id="s5_top_row3_inner">
<div id="s5_pos_top_row3_1" class="s5_float_left" style="width:100%">
<div class="module_round_box_outer">
<div class="module_round_box">
<div class="s5_module_box_1">
<div class="s5_module_box_2">
<div class="s5_outer">
<div class="custom">
<img src="http://www.shape5.com/demo/swapps/images/ipad.png" style=" left: -60px;margin-top: -50px;position: absolute;;" alt="ipad" class="ipad_hide" data-scroll-reveal="enter left and move 50px over 0.6s" data-scroll-reveal-id="10" data-scroll-reveal-initialized="true" data-scroll-reveal-complete="true">
<div class="module_round_box-mediumtitle_light" style="margin-bottom:0px;float:left;padding-top: 45px;">
<h3 class="s5_mod_h3">See what it can do in action</h3>
</div>
<div class="overlay_outter video" style="float:right;">
<div class="overlay_hover_outer">
<div class="overlay_hover_video">
<div class="overlay_centered">
<a title="See Swapps in Action" class="s5mb" id="youtube" href="https://www.youtube.com/v/FglqN1jd1tM" rel="width:800,height:447">
<span class="ion-play ion-play-size"></span>
</a>
</div>
</div>
<img src="http://www.shape5.com/demo/swapps/images/iphonevid.jpg" class="padded" alt="iphone vid">
</div>
</div>
<img src="http://www.shape5.com/demo/swapps/images/earphones.png" style=" right: -60px;margin-top: 25px;position: absolute;;" alt="headphones" class="headphones_hide" data-scroll-reveal="enter right and move 50px over 0.8s" data-scroll-reveal-id="11" data-scroll-reveal-initialized="true" data-scroll-reveal-complete="true"> </div>
</div>
<div style="clear:both; height:0px"></div>
</div>
</div>
</div>
</div>
</div>
<div style="clear:both; height:0px"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Top Row3 -->
<!-- Center area -->
<div id="s5_center_area1">
<div id="s5_center_area2">
<div id="s5_center_area_inner" class="s5_wrap">
<!-- Above Columns Wrap -->
<!-- End Above Columns Wrap -->
<!-- Columns wrap, contains left, right and center columns -->
<div id="s5_columns_wrap">
<div id="s5_columns_wrap_inner">
<div id="s5_center_column_wrap">
<div id="s5_center_column_wrap_inner" style="margin-left:0px; margin-right:0px;">
<div id="s5_component_wrap">
<div id="s5_component_wrap_inner">
<div id="system-message-container">
</div>
<div class="blog-featured" itemscope="" itemtype="http://schema.org/Blog">
</div>
<div style="clear:both;height:0px"></div>
</div>
</div>
</div>
</div>
<!-- Left column -->
<!-- End Left column -->
<!-- Right column -->
<!-- End Right column -->
</div>
</div>
<!-- End columns wrap -->
<!-- Below Columns Wrap -->
<div id="s5_below_columns_wrap1">
<div id="s5_below_columns_wrap2">
<div id="s5_below_columns_inner">
<div id="s5_below_columns_1" class="s5_float_left" style="width:50%">
<div class="module_round_box_outer">
<div class="module_round_box-mediumtitle_dark">
<div class="s5_module_box_1">
<div class="s5_module_box_2">
<div class="s5_mod_h3_outer">
<h3 class="s5_mod_h3">
<span class="s5_h3_first">Your </span><span class="s5_h3_last"> App Unleashed</span>
</h3>
</div>
<div style="clear:both"></div>
<div class="s5_outer-mediumtitle_dark">
<div class="custom-mediumtitle_dark">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
<p class="readmore"><a class="btn" href="http://www.shape5.com/demo/swapps/#">Read More</a></p></div>
</div>
<div style="clear:both; height:0px"></div>
</div>
</div>
</div>
</div>
</div>
<div id="s5_below_columns_2" class="s5_float_left" style="width:50%">
<div class="module_round_box_outer">
<div class="module_round_box">
<div class="s5_module_box_1">
<div class="s5_module_box_2">
<div class="s5_outer">
<div class="custom">
<div style="float: right; position: relative; z-index: 0;" class="twophones">
<img src="http://www.shape5.com/demo/swapps/images/phone2.png" alt="phone2" style="float: right;position:relative;z-index:2;margin-right: 102px;;-webkit-transform: translatex(90px);transform: translatex(90px);opacity: 0;" data-scroll-reveal="enter right and move 90px over 0.5s" data-scroll-reveal-id="12" data-scroll-reveal-initialized="true">
<img src="http://www.shape5.com/demo/swapps/images/phone3.png" class="phone2" alt="phone2" style="float: right;position:absolute;z-index:1;margin-left: 145px;margin-top: 32px;;-webkit-transform: translatex(150px);transform: translatex(150px);opacity: 0;" data-scroll-reveal="enter right and move 150px over 0.5s" data-scroll-reveal-id="13" data-scroll-reveal-initialized="true">
</div></div>
</div>
<div style="clear:both; height:0px"></div>
</div>
</div>
</div>
</div>
</div>
<div style="clear:both; height:0px"></div>
</div>
</div>
</div>
<!-- End Below Columns Wrap -->
</div>
</div>
</div>
<!-- End Center area -->
<!-- Bottom Row1 -->
<div id="s5_bottom_row1_area1">
<div id="s5_bottom_row1_area2">
<div id="s5_bottom_row1_area_inner" class="s5_wrap">
<div id="s5_bottom_row1_wrap">
<div id="s5_bottom_row1">
<div id="s5_bottom_row1_inner">
<div id="s5_pos_bottom_row1_1" class="s5_float_left" style="width:50%">
<div class="module_round_box_outer">
<div class="module_round_box">
<div class="s5_module_box_1">
<div class="s5_module_box_2">
<div class="s5_outer">
<script language="javascript" type="text/javascript" src="https://www.shape5.com/demo/swapps/modules/mod_s5_imageslide/s5_imageslide/class.noobSlide.packed.jquery.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<div style="display:none;">
<img alt="" src="http://www.shape5.com/demo/swapps/images/imageslide1.jpg"><img alt="" src="http://www.shape5.com/demo/swapps/images/imageslide2.jpg"><img alt="" src="http://www.shape5.com/demo/swapps/images/imageslide3.jpg"></div>
<script type="text/javascript">
var picture1link = "";
var picture1target = "_blank";
var picture2link = "";
var picture2target = "_top";
var picture3link = "";
var picture3target = "_top";
var picture4link = "";
var picture4target = "_top";
var picture5link = "";
var picture5target = "_top";
var picture6link = "";
var picture6target = "_top";
var picture7link = "";
var picture7target = "_top";
var picture8link = "";
var picture8target = "_top";
var picture9link = "";
var picture9target = "_top";
var picture10link = "";
var picture10target = "_top";
</script>
<script type="text/javascript">//<![CDATA[
document.write('<link href="http://www.shape5.com/demo/swapps/modules/mod_s5_imageslide/s5_imageslide/style.css" rel="stylesheet" type="text/css" media="screen" />');
//]]></script><link href="https://www.shape5.com/demo/swapps/modules/mod_s5_imageslide/s5_imageslide/style.css" rel="stylesheet" type="text/css" media="screen">
<script language="javascript" type="text/javascript">var display_time = 5000;</script><script language="javascript" type="text/javascript">var tween_time = 800;</script><script type="text/javascript">//<![CDATA[
document.write('<style type="text/css">.s5_button_if {background:url(http://www.shape5.com/demo/swapps/modules/mod_s5_imageslide/s5_imageslide/nonactive.png) no-repeat;}</style>');
//]]></script><style type="text/css">.s5_button_if {background:url(http://www.shape5.com/demo/swapps/modules/mod_s5_imageslide/s5_imageslide/nonactive.png) no-repeat;}</style>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#s5_if_innerbox > .s5imageslides > div').each(function(i,d){
jQuery(d).css('height','auto');
});
var version="2";
window.slideParams={
heightIsWrap:jQuery('#s5_if_innerbox > .s5imageslides > div').eq(0).height(),
widthHandlesOut:jQuery('#s5_if_thumbs_handlesout'+version).width(),
heightHandlesOut:jQuery('#s5_if_thumbs_handlesout'+version).height(),
marginTopThumbsOuter:parseInt(jQuery('#s5_if_thumbsouter'+version).css('marginTop')),
marginLeftThumbsOuter:parseInt(jQuery('#s5_if_thumbsouter'+version).css('marginLeft')),
heightThumbsOuter:parseInt(jQuery('#s5_if_thumbsouter'+version+'').height()),
widthThumbsDiv:jQuery('.s5_if_thumbs'+version+' div').width(),
heightThumbsDiv:jQuery('.s5_if_thumbs div').height(),
marginLeftThumbsDiv:parseInt(jQuery('.s5_if_thumbs'+version+' div').css('marginLeft')),
marginRightThumbsDiv:parseInt(jQuery('.s5_if_thumbs'+version+' div').css('marginRight')),
marginLeftHandlesOutSpan:parseInt(jQuery('#s5_if_thumbs_handlesout'+version+' span').css('marginLeft')),
marginRightHandlesOutSpan:parseInt(jQuery('#s5_if_thumbs_handlesout'+version+' span').css('marginRight')),
marginLeftStop:parseInt(jQuery('#s5_stop').parent().css('marginLeft')),
marginTopStop:parseInt(jQuery('#s5_stop').parent().css('marginTop')),
backgroundSizePrev:50,
backgroundSizeStop:149,
widthPrev:jQuery('#s5_prev').children(0).width(),
heightPrev:jQuery('#s5_prev').children(0).height(),
widthMaskout:jQuery('#s5_if_thumbs_maskout'+version).width(),
heightMaskout:jQuery('#s5_if_thumbs_maskout'+version).height(),
widthMask:jQuery('.s5_mask').parent().width()
};
document.getElementById("s5_if_innerbox").style.display = "block";
});
</script>
<script type="text/javascript">
function adjustSlide(p,width2,ratio){
//return false;
var flag=p.widthPrev/jQuery('#s5_is_leftarrow').width() > 1.2;
jQuery('#s5_if_innerbox > .s5imageslides > div').each(function(i,d){
d.style.width=width2+'px';
});
jQuery('.s5_mask').css({width:width2,marginLeft:/*p.marginLeftMask*ratio+*/'0px'});
//jQuery('#s5_if_thumbsouter2')[0].style.marginLeft=(p.marginLeftThumbsOuter * ratio-80)+'px';
jQuery('#s5_if_thumbsouter2')[0].style.height=(p.heightThumbsOuter * ratio-80)+'px';
jQuery('.s5_if_thumbs2')[0].style.width=p.widthThumbs*ratio+'px';
jQuery('.s5_if_thumbs2')[0].style.height=p.heightThumbs*ratio+'px';
jQuery('s5_if_innerbox').children().each(function(i,d){
d.children().each(function(ii,dd){jQuery(dd).css({width:width2});});
});
if(ratio<1 || flag){
if(ratio>1 && flag) ratio=1;
var targets=[jQuery('#s5_prev'),jQuery('#s5_next')];
for(var i=0;i<targets.length;i++){
var tmp=targets[i].children()[0];
tmp.style.width=p.widthPrev*ratio+'px';
//tmp.style.height=p.heightPrev*ratio+'px';
tmp.style.backgroundSize=p.backgroundSizePrev*ratio+'px';
}
}
var tallest=0;
jQuery('#s5_if_innerbox > .s5imageslides > div').each(function(i,d){
if(jQuery(d).height() > tallest) tallest=jQuery(d).height();
});
jQuery('.s5_is_wrap').css('height', tallest);
var targets=[jQuery('#s5_stop'),jQuery('#s5_play')];
for(var i=0;i<targets.length;i++){
var tmp=targets[i].children()[0];
if(ratio<1 || flag){
if(ratio>1 && flag) ratio=1;
tmp.style.backgroundSize=p.backgroundSizeStop*ratio+'px';
jQuery(tmp).parent().parent().parent().css('top',(tallest-p.backgroundSizeStop*ratio)/2*100/tallest+'%');
}else
jQuery(tmp).parent().parent().parent().css('top',(tallest-p.backgroundSizeStop)/2*100/tallest+'%');
}
if(ratio<1 ||flag) {
if(ratio>1 && flag) ratio=1;
jQuery('#s5_if_thumbs_handlesout2 span').each(function(i,d){
jQuery(d).css({
marginLeft:p.marginLeftHandlesOutSpan*ratio+'px',
marginRight:p.marginRightHandlesOutSpan*ratio+'px'
});
});
}
}
/**
* @author Alexander Farkas
* v. 1.02
*/
(function($) {
$.extend($.fx.step,{
backgroundPosition: function(fx) {
//console.log(fx.state,fx.end);
if (/*fx.state === 0 && */typeof fx.end == 'string') {
var start = $(fx.elem).css('backgroundPosition');
start = toArray(start);
//console.log(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
function toArray(strg){
strg = strg.replace(/left|top/g,'0px');
strg = strg.replace(/right|bottom/g,'100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
}
});
})(jQuery);
jQuery(document).ready(function(){
//jQuery('.s5_is_wrap').css('height',jQuery('#s5_if_innerbox img').eq(0).height());
var s5_startItem = 0;
var itemsx=[0,1,2,];
var s5_if_thumbs_maskout = jQuery('#s5_if_thumbs_maskout2').css('backgroundPositionX',(s5_startItem*18-589+(206 - (itemsx.length * 18)))+'px').css('opacity',0.8);
var fxOptions7 = window.fxOptions7 = { duration:tween_time, easing:'easeInCubic', queue:false};
var thumbsFx = window.thumbsFx = function(objleft){s5_if_thumbs_maskout.animate({backgroundPosition:objleft}, fxOptions7);}
var widthMask=jQuery('.s5_mask').parent().width(),
widthOld=window.widthOld=256;
//$('s5_if_thumbsouter2').style.marginTop='none !important';
jQuery(window).bind('resize',function(){
var currentSize=jQuery('.s5_mask').parent().width();
var ratio=currentSize/window.widthOld;
window.hs7.size=currentSize;
window.hs7.box[0].style.width=window.hs7.items.length * currentSize+'px';
jQuery('#s5_if_innerbox').stop().css({'left':(window.hs7.size * - window.hs7.currentIndex) + 'px',
'width':window.hs7.items.length * currentSize+'px'})
//s5_if_thumbs_maskout.stop().css('left',(window.hs7.currentIndex*68-568)*1);
adjustSlide(slideParams,currentSize,ratio,2);
window.previousSlideWidth=currentSize;
});
var hs7 = window.hs7 = new noobSlide({
size: widthMask ,
box: jQuery('#s5_if_innerbox'),
onHoverStop:true,
items: [0,1,2,],
autoPlay: true,
handles: jQuery('#s5_if_thumbs_handlesout2 span'),
fxOptions: fxOptions7,
addButtons: {previous: jQuery('#s5_prev'), play: jQuery('#s5_play'), stop: jQuery('#s5_stop'), next: jQuery('#s5_next')},
button_event: 'click',
interval: 5000,
onWalk: function(currentItem){thumbsFx('('+(currentItem*18-589+(206 - (itemsx.length * 18)))+'px 0px)');},
s5_startItem: s5_startItem});
jQuery('.s5_if_thumbs2').css('paddingLeft',(206 - (hs7.items.length * 18)) + 'px');
jQuery('#s5_if_thumbs_handlesout2').css('paddingLeft',(206 - (hs7.items.length * 18)) + 'px');
hs7.onWalk=function(currentItem){thumbsFx('('+((206 - (hs7.items.length * 18)) + currentItem*18-589)+'px 0px)');}
hs7.walk(0);
var currentSize=jQuery('.s5_mask').parent().width();
var ratio=currentSize/window.widthOld;
window.previousSlideWidth=widthMask;
adjustSlide(slideParams,widthMask,ratio);
document.getElementById("s5_if_innerbox").style.display = "block";
});
</script>
<div class="s5_is_wrap" style="height: 451px; position: relative;">
<div>
<div id="s5_ismod_onhover" style="width: 178px; position: absolute; z-index: 1; display: none; top: 33.4811529933481%; left: 45%;">
<!--<div style="margin-left: 73px; position: absolute; margin-top:145.5px;"> -->
<div>
<div id="s5_stop">
<div onclick="s5_ismod_switchbuttons();" style="margin-top: 4px; cursor: pointer; float: left; margin-left: 4px; margin-right: 4px;" id="s5_ismod_stop"></div>
</div>
<div id="s5_play">
<div onclick="s5_ismod_switchbuttons();" style="display: none; margin-top: 4px; cursor: pointer; float: left; margin-left: 4px; margin-right: 8px;" id="s5_ismod_play"></div>
</div>
</div>
</div>
<div id="s5_prev" style="float:left;height:100%;">
<div id="s5_is_leftarrow" style="display:block;height:100%;"></div>
</div>
<div class="s5_mask" style="margin-left: 0px; width: 562px; overflow: hidden; height: 100%; float: left;">
<div id="s5_if_innerbox" style="display: block; width: 1686px; left: -562px;">
<div class="s5imageslides">
<div style="width: 562px; height: auto;">
<div class="module">
<div>
<div>
<div>
<div class="custom">
<div style="text-align:center;">
<a title="Image Screenshot 1" class="s5mb" id="mb1" href="http://www.shape5.com/demo/swapps/images/imageslide1_lrg.jpg" rel="[me]">
<img src="http://www.shape5.com/demo/swapps/images/imageslide1.jpg" alt="alt">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="s5imageslides">
<div style="width: 562px; height: auto;">
<div class="module">
<div>
<div>
<div>
<div class="custom">
<div style="text-align:center;">
<a title="Image Screenshot 2" class="s5mb" id="mb1" href="http://www.shape5.com/demo/swapps/images/imageslide2_lrg.jpg" rel="[me]">
<img src="http://www.shape5.com/demo/swapps/images/imageslide2.jpg" alt="alt">
</a>
</div></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="s5imageslides">
<div style="width: 562px; height: auto;">
<div class="module">
<div>
<div>
<div>
<div class="custom">
<div style="text-align:center;">
<a title="Image Screenshot 3" class="s5mb" id="mb1" href="http://www.shape5.com/demo/swapps/images/imageslide3_lrg.jpg" rel="[me]">
<img src="http://www.shape5.com/demo/swapps/images/imageslide3.jpg" alt="alt">
</a>
</div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="s5_next" style="position:absolute;right:0px;height:100%;">
<div id="s5_is_rightarrow" style="display:block;height:100%;"></div>
</div>
<div style="clear:both;"></div>
</div>
<div id="s5_if_thumbsouter2" style="display: none; bottom: 10%; right: 0px; height: 10.0078125px;">
<div class="s5_if_thumbs2" style="padding-left: 152px;">
<div></div> <div></div> <div></div> </div>
<div id="s5_if_thumbs_maskout2" style="position: absolute; left: 0px; width: 100%; opacity: 0.8; background-position: -419px 0px;"></div>
<p id="s5_if_thumbs_handlesout2" style="padding-left: 152px;">
<span></span> <span></span> <span></span> </p>
</div>
</div>
</div>
<div style="clear:both; height:0px"></div>
</div>
</div>
</div>
</div>
</div>
<div id="s5_pos_bottom_row1_2" class="s5_float_left" style="width:50%">
<div class="module_round_box_outer">
<div class="module_round_box-mediumtitle_light">
<div class="s5_module_box_1">
<div class="s5_module_box_2">
<div class="s5_outer-mediumtitle_light">
<div class="custom-mediumtitle_light">
<div data-scroll-reveal="enter right and move 150px over 0.7s" data-scroll-reveal-id="14" style="-webkit-transform: translatex(150px);transform: translatex(150px);opacity: 0;" data-scroll-reveal-initialized="true">
<div style="margin-bottom:0px;float:left;padding-top: 120px;" class="module_round_box-mediumtitle_light">
<h3 class="s5_mod_h3">
Screenshots</h3>
</div>
<div style="clear:both;"></div>
Show off your App here with some amazing screenshots.
<p class="readmore"><a href="http://www.shape5.com/demo/swapps/#" class="btn">View More</a></p>
</div></div>
</div>
<div style="clear:both; height:0px"></div>
</div>
</div>
</div>
</div>
</div>
<div style="clear:both; height:0px"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Bottom Row1 -->
<!-- Bottom Row2 -->
<div id="s5_bottom_row2_area1">
<div id="s5_bottom_row2_area2">
<div id="s5_bottom_row2_area_inner" class="s5_wrap">
<div id="s5_bottom_row2_wrap">
<div id="s5_bottom_row2">
<div id="s5_bottom_row2_inner">
<div id="s5_pos_bottom_row2_1" class="s5_float_left" style="width:100%">
<div class="module_round_box_outer">
<div class="module_round_box-bigtitle_dark">
<div class="s5_module_box_1">
<div class="s5_module_box_2">
<div class="s5_mod_h3_outer">
<h3 class="s5_mod_h3">
<span class="s5_h3_first">Pricing </span><span class="s5_h3_last"> Options</span>
</h3>
</div>
<div style="clear:both"></div>
<div class="s5_outer-bigtitle_dark">
<div class="custom-bigtitle_dark">
<center>You can list out the different purchase options and their features for your app here.</center>
<br><br>
<div class="s5_pricetable_3">
<div class="s5_pricetable_column" data-scroll-reveal="enter left and move 350px over 0.6s" data-scroll-reveal-id="15" style="-webkit-transform: translatex(-350px);transform: translatex(-350px);opacity: 0;" data-scroll-reveal-initialized="true">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Lite</div>
<span class="dollarsign">$</span><span class="price">0</span>
<div class="s5_options">
1 devices<br>
2 Users<br>
<span class="s5_price_gray">Add Files Remotely<br>
Send Files Remotely<br>
</span>
</div>
<div class="s5_horizontalrule"></div>
<div class="s5_buttoncenter"><a href="http://www.shape5.com/demo/swapps/#" class="button s5_pricetable">Signup</a></div>
</div>
</div>
<div class="s5_pricetable_column recommended" data-scroll-reveal="enter bottom and move 350px up 0.7s" data-scroll-reveal-id="16" style="-webkit-transform: translatey(350px);transform: translatey(350px);opacity: 0;" data-scroll-reveal-initialized="true">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Limited</div>
<span class="dollarsign">$</span><span class="price s5_highlight">.99</span>
<div class="s5_options">
1 devices<br>
2 Users<br>
Add Files Remotely<br>
Send Files Remotely<br>
</div>
<div class="s5_horizontalrule"></div>
<div class="s5_buttoncenter"><a href="http://www.shape5.com/demo/swapps/#" class="button s5_pricetable">Signup</a></div>
</div>
</div>
<div class="s5_pricetable_column" data-scroll-reveal="enter right and move 350px over 0.6s" data-scroll-reveal-id="17" style="-webkit-transform: translatex(350px);transform: translatex(350px);opacity: 0;" data-scroll-reveal-initialized="true">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Extended</div>
<span class="dollarsign">$</span><span class="price s5_highlight2">5</span>
<div class="s5_options">
1 devices<br>
2 Users<br>
Add Files Remotely<br>
Send Files Remotely<br>
</div>
<div class="s5_horizontalrule"></div>
<div class="s5_buttoncenter"><a href="http://www.shape5.com/demo/swapps/#" class="button s5_pricetable">Signup</a></div>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
<div style="clear:both; height:0px"></div>
</div>
</div>
</div>
</div>
</div>
<div style="clear:both; height:0px"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Bottom Row2 -->
<!-- Bottom Row3 -->
<div id="s5_bottom_row3_area1">
<div id="s5_bottom_row3_area2">
<div id="s5_bottom_row3_area_inner" class="s5_wrap">
<div id="s5_bottom_row3_wrap">
<div id="s5_bottom_row3">
<div id="s5_bottom_row3_inner">
<div id="s5_pos_bottom_row3_1" class="s5_float_left" style="width:100%">
<div class="module_round_box_outer">
<div class="module_round_box-bigtitle_light">
<div class="s5_module_box_1">
<div class="s5_module_box_2">
<div class="s5_mod_h3_outer">
<h3 class="s5_mod_h3">
<span class="s5_h3_first">Testimonials </span><span class="s5_h3_last"></span>
</h3>
</div>
<div style="clear:both"></div>
<div class="s5_outer-bigtitle_light">
<script language="javascript" type="text/javascript">var s5_ifvisible = 3;</script>
<script type="text/javascript">//<![CDATA[
document.write('<link href="http://www.shape5.com/demo/swapps/modules/mod_s5_tabshow/s5_tabshow/styles.css" rel="stylesheet" type="text/css" media="screen" />');
//]]></script><link href="https://www.shape5.com/demo/swapps/modules/mod_s5_tabshow/s5_tabshow/styles.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="https://www.shape5.com/demo/swapps//modules/mod_s5_tabshow/s5_tabshow/iCarousel_jquery.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script language="javascript" type="text/javascript">
function s5_tabshowfunctionld() {
var s5Carousel = new iCarousel("#s5_button_content", {
idPrevious: "#s5_button_previous",
idNext: "",
idToggle: "",
item: {
klass: "s5_button_item",
size: 1400},
animation: {
type: "scroll",
duration: 1000,
amount: 1,
rotate: {
type: 'auto',
interval: 4000,
onMouseOver: "stop"
}
},
display_time: 4,
s5_javascript: 'mootools'
});
jQuery("#thumb0").bind("mouseover", function(event){event.preventDefault();s5Carousel.goTo(0)});
jQuery("#thumb1").bind("mouseover", function(event){event.preventDefault();s5Carousel.goTo(1)});
jQuery("#thumb2").bind("mouseover", function(event){event.preventDefault();s5Carousel.goTo(2)});
}
function s5_tabshowloadit() {
s5_tabshowfunctionld();}
jQuery(document).ready(function(){s5_tabshowloadit();});
</script>
<div id="s5_button_wrap0" style="width:1400px">
<div id="s5_button_wrap1">
<div id="s5_button_wrap2">
<div id="s5_button_frame">
<ul id="s5navfs">
<li id="thumb0" class="s5_ts_not_active"><a onmouseover="s5_active1()">Tab 1</a></li>
<li id="thumb1" class="s5_ts_active"><a onmouseover="s5_active2()">Tab 2</a></li>
<li id="thumb2" class="s5_ts_not_active"><a onmouseover="s5_active3()">Tab 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="s5_tabshow_left" style="width:1400px">
<div id="s5_tabshow_right" style="width:1400px;">
<div id="s5_button" style="width:1398px">
<ul id="s5_button_content" style="left: -5600px;">
<li class="s5_button_item" id="s5_button_item1" style="width: 1400px; min-height: 1px;"><div style="margin-left: 0px; padding: 0px; width: 1176px; visibility: visible;" class="s5_button_item_inner"></div></li>
<li class="s5_button_item" id="s5_button_item2" style="width: 1400px; min-height: 1px;"><div style="margin-left: 0px; padding: 0px; width: 1176px; visibility: visible;" class="s5_button_item_inner"></div></li>
<li class="s5_button_item" id="s5_button_item3" style="width: 1400px; min-height: 1px;"><div style="margin-left: 0px; padding: 0px; width: 1176px; visibility: visible;" class="s5_button_item_inner"></div></li>
<li class="s5_button_item" style="width: 1400px; min-height: 1px;"><div style="margin-left: 0px; padding: 0px; width: 1176px; visibility: visible;" class="s5_button_item_inner"> <div class="moduletable">
<div class="custom">
<img src="http://www.shape5.com/demo/swapps/images/testimonial1.jpg" alt="man1" class="s5_testimonials"><br><br>
Yorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam molestie mi a nunc porta facilisis. Mauris varius volutpat interdum. In quis congue velit, sit amet ultricies augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse mi orci, egestas in egestas eut.
<br><br>
<strong>Tommy Smith</strong></div>
</div>
<div style="clear:both;height:0px"></div>
</div></li><li class="s5_button_item" style="width: 1400px; min-height: 1px;"><div style="margin-left: 0px; padding: 0px; width: 1176px; visibility: visible;" class="s5_button_item_inner"> <div class="moduletable">
<div class="custom">
<img src="http://www.shape5.com/demo/swapps/images/testimonial2.jpg" class="s5_testimonials" alt="man2"><br><br>
Yorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam molestie mi a nunc porta facilisis. Mauris varius volutpat interdum. In quis congue velit, sit amet ultricies augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse mi orci, egestas in egestas eut.
<br><br>
<strong>Tommy Smith</strong></div>
</div>
<div style="clear:both;height:0px"></div>
</div></li><li class="s5_button_item" style="width: 1400px; min-height: 1px;"><div style="margin-left: 0px; padding: 0px; width: 1176px; visibility: visible;" class="s5_button_item_inner"> <div class="moduletable">
<div class="custom">
<img src="http://www.shape5.com/demo/swapps/images/testimonial3.jpg" alt="man3" class="s5_testimonials"><br><br>
Yorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam molestie mi a nunc porta facilisis. Mauris varius volutpat interdum. In quis congue velit, sit amet ultricies augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse mi orci, egestas in egestas eut.
<br><br>
<strong>Tommy Smith</strong></div>
</div>
<div style="clear:both;height:0px"></div>
</div></li><li class="s5_button_item" style="width: 1400px; min-height: 1px;"><div style="margin-left: 0px; padding: 0px; width: 1176px; visibility: visible;" class="s5_button_item_inner"></div></li><li class="s5_button_item" style="width: 1400px; min-height: 1px;"><div style="margin-left: 0px; padding: 0px; width: 1176px; visibility: visible;" class="s5_button_item_inner"></div></li><li class="s5_button_item" style="width: 1400px; min-height: 1px;"><div style="margin-left: 0px; padding: 0px; width: 1176px; visibility: visible;" class="s5_button_item_inner"></div></li></ul>
</div>
</div>
</div>
<script type="text/javascript" src="https://www.shape5.com/demo/swapps//modules/mod_s5_tabshow/s5_tabshow/s5_activejs.js"></script>
</div>
<div style="clear:both; height:0px"></div>
</div>
</div>
</div>
</div>
</div>
<div style="clear:both; height:0px"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Bottom Row3 -->
<div id="s5_pos_custom_2" class="s5_wrap">
<div class="module_round_box_outer">
<div class="module_round_box-bigtitle_dark">
<div class="s5_module_box_1">
<div class="s5_module_box_2">
<div class="s5_mod_h3_outer">
<h3 class="s5_mod_h3">
<span class="s5_h3_first">Stay </span><span class="s5_h3_last"> Notified</span>
</h3>
</div>
<div style="clear:both"></div>
<div class="s5_outer-bigtitle_dark">
<div class="custom-bigtitle_dark">
<center>Keep up to date with changes and updates to swapps via our email newsletter. Powered by S5 MailChimp Signup module</center></div>
</div>
<div style="clear:both; height:0px"></div>
</div>
</div>
</div>
</div>
<div class="module_round_box_outer">
<div class="module_round_box-centered">
<div class="s5_module_box_1">
<div class="s5_module_box_2">
<div class="s5_outer-centered">
<script type="text/javascript">var s5mailchimpurl = "http://www.shape5.com/demo/swapps/modules/mod_s5_mailchimp_signup/";</script>
<form id="signup" action="http://www.shape5.com/demo/swapps/index.php" method="get" class="mailchimp_signup_form">
<fieldset>
<span id="response">
</span>
<input type="text" name="email" class="inputbox mailchimp_signup" id="email" onblur="if (this.value=='') this.value='Enter your email...';" onfocus="if (this.value=='Enter your email...') this.value='';" value="Enter your email...">
<button name="submit" class="button mailchimp_signup" alt="Subscribe">Subscribe</button>
</fieldset>
</form>
</div>
<div style="clear:both; height:0px"></div>
</div>
</div>
</div>
</div>
<div class="module_round_box_outer">
<div class="module_round_box-centered">
<div class="s5_module_box_1">
<div class="s5_module_box_2">
<div class="s5_outer-centered">
<div class="custom-centered">
<div data-scroll-reveal="enter bottom and move 250px up 0.5s" data-scroll-reveal-id="18" style="-webkit-transform: translatey(250px);transform: translatey(250px);opacity: 0;" data-scroll-reveal-initialized="true">
<br><br>
<div style="clear:both;"></div>
<a href="javascript:;" class="social_icon ion-social-facebook"></a>
<a href="javascript:;" class="social_icon ion-social-twitter"></a>
<a href="javascript:;" class="social_icon ion-social-googleplus"></a>
<a href="javascript:;" class="social_icon ion-social-rss"></a>
<a href="javascript:;" class="social_icon ion-social-pinterest"></a>
</div>
</div>
</div>
<div style="clear:both; height:0px"></div>
</div>
</div>
</div>
</div>
<div style="clear:both; height:0px"></div>
</div>
<!-- Footer Area -->
<div id="s5_footer_area1">
<div id="s5_footer_area2">
<div id="s5_footer_area_inner" class="s5_wrap">
<div class="s5_logo_module" onclick="window.document.location.href='http://www.shape5.com/demo/swapps/'">
<div class="moduletable">
<div class="custom">
<div class="site_logo_symbol">S</div><span class="site_logo_text">WAPPS</span>
<div class="clear:both;"></div></div>
</div>
</div>
<div style="clear:both; height:0px"></div>
<div id="s5_bottom_menu_wrap">
<div class="moduletable">
<ul class="nav menu">
<li class="item-171 active"><a href="http://www.shape5.com/demo/swapps/index.php">Home</a></li><li class="item-172"><a href="http://www.shape5.com/demo/swapps/index.php/about-us">About Us</a></li><li class="item-173"><a href="http://www.shape5.com/demo/swapps/index.php/news">News</a></li><li class="item-175"><a href="http://www.shape5.com/demo/swapps/index.php/site-terms">Site Terms</a></li><li class="item-264"><a href="http://www.shape5.com/demo/swapps/index.php/events">Events</a></li></ul>
</div>
<div class="moduletable-s5_box" style="display: none;">
<script type="text/javascript" src="https://www.shape5.com/demo/swapps/modules/mod_s5_box/js/s5_box_hide_div.js"></script>
<div class="s5boxhidden"><div id="s5box_login">
<div class="module_round_box_outer">
<div class="module_round_box-none">
<div class="s5_module_box_1">
<div class="s5_module_box_2">
<div class="s5_mod_h3_outer">
<h3 class="s5_mod_h3">
<span class="s5_h3_first">Login </span><span class="s5_h3_last"></span>
</h3>
</div>
<div style="clear:both"></div>
<div class="s5_outer-none">
<form action="http://www.shape5.com/demo/swapps/index.php" method="post" id="login-form" class="form-inline">
<div class="userdata">
<div id="form-login-username" class="control-group">
<div class="controls">
<div class="input-prepend">
<span class="add-on">
<span class="icon-user hasTooltip" title="" data-original-title="Username"></span>
<label for="modlgn-username" class="element-invisible">Username</label>
</span>
<input id="modlgn-username" type="text" name="username" class="input-small" tabindex="0" size="18" placeholder="Username">
</div>
</div>
</div>
<div id="form-login-password" class="control-group">
<div class="controls">
<div class="input-prepend">
<span class="add-on">
<span class="icon-lock hasTooltip" title="" data-original-title="Password">
</span>
<label for="modlgn-passwd" class="element-invisible">Password </label>
</span>
<input id="modlgn-passwd" type="password" name="password" class="input-small" tabindex="0" size="18" placeholder="Password">
</div>
</div>
</div>
<div id="form-login-remember" class="control-group checkbox">
<label for="modlgn-remember" class="control-label">Remember Me</label> <input id="modlgn-remember" type="checkbox" name="remember" class="inputbox" value="yes">
</div>
<div id="form-login-submit" class="control-group">
<div class="controls">
<button type="submit" tabindex="0" name="Submit" class="btn btn-primary">Log in</button>
</div>
</div>
<ul class="unstyled">
<li>
<a href="http://www.shape5.com/demo/swapps/index.php/component/users/?view=remind">
Forgot your username?</a>
</li>
<li>
<a href="http://www.shape5.com/demo/swapps/index.php/component/users/?view=reset">
Forgot your password?</a>
</li>
</ul>
<input type="hidden" name="option" value="com_users">
<input type="hidden" name="task" value="user.login">
<input type="hidden" name="return" value="aW5kZXgucGhwP0l0ZW1pZD0xMDE=">
<input type="hidden" name="a12a32da656fce01ab06f1f5409d75f1" value="1"> </div>
</form>
</div>
<div style="clear:both; height:0px"></div>
</div>
</div>
</div>
</div>
</div></div>
<div class="s5boxhidden"><div id="s5box_register">
<div class="module_round_box_outer">
<div class="module_round_box">
<div class="s5_module_box_1">
<div class="s5_module_box_2">
<div class="s5_mod_h3_outer">
<h3 class="s5_mod_h3">
<span class="s5_h3_first">Register </span><span class="s5_h3_last"></span>
</h3>
</div>
<div style="clear:both"></div>
<div class="s5_outer">
You need to enable user registration from User Manager/Options in the backend of Joomla before this module will activate. </div>
<div style="clear:both; height:0px"></div>
</div>
</div>
</div>
</div>
</div></div>
</div>
</div>
<div style="clear:both; height:0px"></div>
<div id="s5_footer">
<span class="footerc">
Copyright © 2014. Swapps.
Designed by Shape5.com <a href="http://www.shape5.com/" title="Visit Shape5.com Joomla Template Club" target="blank" class="footerc">Joomla Templates</a>
</span>
</div>
<div style="clear:both; height:0px"></div>
<div id="fontControls"><a class="decreaseSize" href="javascript:;fontControls">A</a><a class="resetSize" href="javascript:;fontControls">A</a><a class="increaseSize" href="javascript:;fontControls">A</a></div>
</div>
</div>
</div>
<!-- End Footer Area -->
<!-- Bottom Vertex Calls -->
<!-- Page scroll, tooltips, multibox, and ie6 warning -->
<div id="s5_scroll_wrap" class="s5_wrap">
<script type="text/javascript">
/*! Jquery scrollto function */
(function(a,c){var b=(function(){var d=c(a.documentElement),f=c(a.body),e;if(d.scrollTop()){return d}else{e=f.scrollTop();if(f.scrollTop(e+1).scrollTop()==e){return d}else{return f.scrollTop(e)}}}());c.fn.smoothScroll=function(d){d=~~d||400;return this.find('a[href*="#s5"]').click(function(f){var g=this.hash,e=c(g);if(location.pathname.replace(/^\//,'')===this.pathname.replace(/^\//,'')&&location.hostname===this.hostname){if(e.length){f.preventDefault();b.stop().animate({scrollTop:e.offset().top},d,function(){location.hash=g})}}}).end()}}(document,jQuery));
jQuery(document).ready(function(){
jQuery('html').smoothScroll(700);
});
function s5_page_scroll(obj){ if(jQuery.browser.mozilla) var target = 'html'; else var target='html body'; jQuery(target).stop().animate({scrollTop:jQuery(obj).offset().top},700,function(){location.hash=obj}); }
function s5_hide_scroll_to_top_display_none() { if (window.pageYOffset < 300) { document.getElementById("s5_scrolltopvar").style.display = "none"; } }
function s5_hide_scroll_to_top_fadein_class() { document.getElementById("s5_scrolltopvar").className = "s5_scrolltop_fadein"; }
function s5_hide_scroll_to_top() {
if (window.pageYOffset >= 300) {document.getElementById("s5_scrolltopvar").style.display = "block";
document.getElementById("s5_scrolltopvar").style.visibility = "visible";
window.setTimeout(s5_hide_scroll_to_top_fadein_class,300);}
else {document.getElementById("s5_scrolltopvar").className = "s5_scrolltop_fadeout";window.setTimeout(s5_hide_scroll_to_top_display_none,300);}}
jQuery(document).ready( function() {s5_hide_scroll_to_top();});
jQuery(window).resize(s5_hide_scroll_to_top);
if(window.addEventListener) {
window.addEventListener('scroll', s5_hide_scroll_to_top, false);
}
else if (window.attachEvent) {
window.attachEvent('onscroll', s5_hide_scroll_to_top);
}
</script>
<div id="s5_scrolltopvar" class="s5_scrolltop_fadeout" style="visibility: hidden; display: none;">
<a href="http://www.shape5.com/demo/swapps/#s5_scrolltotop" id="s5_scrolltop_a" class="s5_scrolltotop"></a>
</div>
</div>
<!-- Start compression if enabled -->
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.s5mb').each(function(i,z){if(!z.getAttribute('rel'))z.setAttribute('rel','[me]');});
}(jQuery));
var s5mbox = {};
jQuery(document).ready(function($){
window.s5mbox = new multiBox({
mbClass: '.s5mb',/*class you need to add links that you want to trigger multiBox with (remember and update CSS files)*/
container: $(document.body),/*where to inject multiBox*/
path: 'http://www.shape5.com/demo/swapps/templates/swapps/js/multibox/',/*path to mp3player and flvplayer etc*/
useOverlay: true,/*detect overlay setting*/
maxSize: {w:600, h:400},/*max dimensions (width,height) - set to null to disable resizing*/
movieSize: {w:400, h:300},
addDownload: false,/*do you want the files to be downloadable?*/
descClassName: 's5_multibox',/*the class name of the description divs*/
pathToDownloadScript: 'http://www.shape5.com/demo/swapps/templates/swapps/js/multibox/forceDownload.asp',/*if above is true, specify path to download script (classicASP and ASP.NET versions included)*/
addRollover: false,/*add rollover fade to each multibox link*/
addOverlayIcon: false,/*adds overlay icons to images within multibox links*/
addChain: false,/*cycle through all images fading them out then in*/
recalcTop: true,/*subtract the height of controls panel from top position*/
addTips: false,/*adds MooTools built in 'Tips' class to each element (see: http://mootools.net/docs/Plugins/Tips)*/
autoOpen: 0/*to auto open a multiBox element on page load change to (1, 2, or 3 etc)*/
});
}(jQuery)); Eventx.onResizend(function(){
s5mbox.resize();
});
</script>
<!-- Additional scripts to load just before closing body tag -->
<!-- Info Slide script - JS and CSS called in header -->
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.s5_is_slide').each(function (i, d) {
jQuery(d).wrapInner(jQuery('<div class="s5_is_display"></div>'));
});
var options = {
wrapperId: "s5_body"
};
var slide = new Slidex();
slide.init(options);
});
</script>
<!-- Scroll Reavel script - JS called in header -->
<script type="text/javascript">
jQuery(document).ready(function(){
if (jQuery(this).width() > 1025) {
window.scrollReveal = new scrollReveal();
}
});
</script>
<!-- File compression. Needs to be called last on this file -->
<!-- Responsive Bottom Mobile Bar -->
<!-- Call bottom bar for mobile devices if layout is responsive -->
<div id="s5_responsive_mobile_bottom_bar_outer" style="display:none">
<div id="s5_responsive_mobile_bottom_bar" class="s5_responsive_mobile_bar_dark">
<!-- Call mobile links if links are enabled and cookie is currently set to mobile -->
<div id="s5_responsive_switch_mobile">
<a id="s5_responsive_switch" href="http://www.shape5.com/demo/swapps/?s5_responsive_switch_wwwshape5comdemoswapps=0">Desktop Version</a>
</div>
<div id="s5_responsive_mobile_scroll">
<a href="http://www.shape5.com/demo/swapps/#s5_scrolltotop" class="s5_scrolltotop"></a>
</div>
<div style="clear:both;height:0px"></div>
</div>
</div>
<!-- Call bottom bar for all devices if user has chosen to see desktop version -->
<!-- Closing call for mobile sidebar body wrap defined in includes top file -->
<div style="clear:both"></div>
</div>
</div>
</div><div class="MultiBoxContainer" style="opacity: 0; display: none;"><iframe id="multiBoxIframe" name="mulitBoxIframe" src="javascript:void(0);" frameborder="0" scrolling="no" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0;"></iframe><div class="MultiBoxContent"></div><div class="MultiBoxClose"></div><div class="MultiBoxControlsContainer" style="height: 0px;"><div class="MultiBoxControls"><div class="MultiBoxPrevious"></div><div class="MultiBoxNext"></div><div class="MultiBoxTitle"></div><div class="MultiBoxNumber"></div><div class="MultiBoxDescription"></div><div style="clear: both;"></div></div></div></div><div id="OverlayContainer" style="position: absolute; left: 0px; height: 100%; top: 0px; width: 100%; opacity: 0; overflow: hidden; z-index: -1; background: black;"></div>
<!-- End Body Padding -->
<div id="cboxOverlay" style="display: none;"></div><div id="colorbox" class="" style="display: none; padding-bottom: 75px; padding-right: 75px;"><div id="cboxWrapper"><div><div id="cboxTopLeft" style="float: left;"></div><div id="cboxTopCenter" style="float: left;"></div><div id="cboxTopRight" style="float: left;"></div></div><div style="clear: left;"><div id="cboxMiddleLeft" style="float: left;"></div><div id="cboxContent" style="float: left;"><div id="cboxLoadedContent" style="width: 0px; height: 0px; overflow: hidden; float: left;"></div><div id="cboxTitle" style="float: left;"></div><div id="cboxCurrent" style="float: left;"></div><div id="cboxNext" style="float: left;"></div><div id="cboxPrevious" style="float: left;"></div><div id="cboxSlideshow" style="float: left;"></div><div id="cboxClose" style="float: left;"></div></div><div id="cboxMiddleRight" style="float: left;"></div></div><div style="clear: left;"><div id="cboxBottomLeft" style="float: left;"></div><div id="cboxBottomCenter" style="float: left;"></div><div id="cboxBottomRight" style="float: left;"></div></div></div><div style="position: absolute; width: 9999px; visibility: hidden; display: none;"></div></div><div id="subMenusContainer" class=""><div class="s5_sub_wrap" id="ul_child_1"><ul style="margin-top: 0px; float: left;"><li id="li_child_1"><ul style="float:left;"><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/pages/contact-us" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/pages/contact-us"">Contact Us</span></a></span></li><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/pages/search" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/pages/search"">Search</span></a></span></li><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/pages/links" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/pages/links"">Links</span></a></span></li><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/pages/wrapper" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/pages/wrapper"">Wrapper</span></a></span></li><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/pages/about-us" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/pages/about-us"">About Us</span></a></span></li><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/pages/news" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/pages/news"">Category Blog</span></a></span></li><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/pages/our-services" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/pages/our-services"">Our Services</span></a></span></li></ul><ul style="float:left;"><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/pages/404-error" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/pages/404-error"">404 Error</span></a></span></li><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/pages/pricing-table" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/pages/pricing-table"">Pricing Table</span></a></span></li><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/pages/faqs" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/pages/faqs"">FAQs</span></a></span></li><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/pages/team" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/pages/team"">Team</span></a></span></li><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/pages/portfolio" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/pages/portfolio"">Portfolio</span></a></span></li><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/pages/circle-callout-table" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/pages/circle-callout-table"">Circle Callout Table</span></a></span></li></ul></li></ul></div><div class="s5_sub_wrap" id="ul_child_15"><ul style="margin-top: 0px; float: left;"><li id="li_child_15"><ul style="float:left;"><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/extensions/s5-image-and-content-fader-v3" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/extensions/s5-image-and-content-fader-v3"">S5 Image and Content Fader v3</span></a><span class="S5_subtext" onclick="window.document.location.href="/demo/swapps/index.php/extensions/s5-image-and-content-fader-v3"">Image Rotating Extension</span></span></li><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/extensions/s5-accordion-menu" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/extensions/s5-accordion-menu"">S5 Accordion Menu</span></a><span class="S5_subtext" onclick="window.document.location.href="/demo/swapps/index.php/extensions/s5-accordion-menu"">Accordion Column Menu</span></span></li><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/extensions/s5-box" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/extensions/s5-box"">S5 Box</span></a><span class="S5_subtext" onclick="window.document.location.href="/demo/swapps/index.php/extensions/s5-box"">Popup Box for Login</span></span></li><li class="subMenuParentBtn subParentBtn"><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/extensions/s5-flex-menu" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/extensions/s5-flex-menu"">S5 Flex Menu</span></a><span class="S5_subtext" onclick="window.document.location.href="/demo/swapps/index.php/extensions/s5-flex-menu"">Advanced Menu System</span></span></li><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/extensions/s5-tab-show" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/extensions/s5-tab-show"">S5 Tab Show</span></a><span class="S5_subtext" onclick="window.document.location.href="/demo/swapps/index.php/extensions/s5-tab-show"">Organize Your Site's Content</span></span></li></ul><ul style="float:left;"><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/extensions/s5-image-and-content-fader" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/extensions/s5-image-and-content-fader"">S5 Image and Content Fader</span></a><span class="S5_subtext" onclick="window.document.location.href="/demo/swapps/index.php/extensions/s5-image-and-content-fader"">Image Rotating Extension</span></span></li><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/extensions/s5-map-it-with-google" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/extensions/s5-map-it-with-google"">S5 Map it With Google</span></a><span class="S5_subtext" onclick="window.document.location.href="/demo/swapps/index.php/extensions/s5-map-it-with-google"">Give Customers Directions</span></span></li><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/extensions/s5-live-search" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/extensions/s5-live-search"">S5 Live Search</span></a><span class="S5_subtext" onclick="window.document.location.href="/demo/swapps/index.php/extensions/s5-live-search"">Instant Search Results</span></span></li><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/extensions/s5-mailchimp-signup" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/extensions/s5-mailchimp-signup"">S5 MailChimp Signup </span></a><span class="S5_subtext" onclick="window.document.location.href="/demo/swapps/index.php/extensions/s5-mailchimp-signup"">AJAX Newsletter Signup</span></span></li></ul></li></ul></div><div class="s5_sub_wrap_lower" id="ul_child_19"><ul style="margin-left: 0px; float: left;"><li id="li_child_19"><ul style="float:left;"><li class="subMenuParentBtn subParentBtn subSepBtn"><span class="S5_submenu_item"><span class="s5_img_span"><img style="float:left;cursor:pointer" src="http://www.shape5.com/demo/swapps/images/stories/application_put.png" onclick="window.document.location.href='javascript:;'" alt="2013-05-12-04-01-46"></span><a href="javascript:;" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="javascript:;"">Drop Down Menu</span></a><span class="S5_subtext" onclick="window.document.location.href="javascript:;"">Unlimited Level Options</span></span></li><li class="subMenuParentBtn subMenuBtn subSepBtn"><span class="S5_submenu_item"><span class="s5_img_span"><img style="float:left;cursor:pointer" src="http://www.shape5.com/demo/swapps/images/stories/cog_edit.png" onclick="window.document.location.href='javascript:;'" alt="menu-module-example"></span><a href="javascript:;" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="javascript:;"">Menu Module Example</span></a><span class="S5_subtext" onclick="window.document.location.href="javascript:;"">Publish Any Module to Any Menu</span></span><div class="S5_menu_module_parent_group"><div class="S5_menu_module_group"><div style="width:100%;"><div style="float:left; width:100%;"> <div class="moduletable">
<div class="custom">
<div style="width: 182px; font-size: 0.85em;">
<div style="float: left;"><img src="http://www.shape5.com/demo/images/multibox3.jpg" border="0" alt="" style="width: 72px;"></div>
This is a sample module to showcase the functionality of the S5 Flex Menu system. This menu system contains up to 40 module positions and you can publish any module to any of these positions under any menu item.</div></div>
</div>
</div></div><div style="clear:both;"></div></div></div></li></ul><ul style="float:left;"><li class="subMenuParentBtn subMenuBtn subSepBtn"><span class="S5_submenu_item"><span class="s5_img_span"><img style="float:left;cursor:pointer" src="http://www.shape5.com/demo/swapps/images/stories/application_side_boxes.png" onclick="window.document.location.href='javascript:;'" alt="grouped-child-menu"></span><a href="javascript:;" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="javascript:;"">Grouped Child Menu</span></a><span class="S5_subtext" onclick="window.document.location.href="javascript:;"">Group Children Together</span></span><div class="S5_grouped_child_item"><span class=" subSepBtn"><span class="S5_submenu_item"><a href="javascript:;" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="javascript:;"">Dummy Sample Link</span></a></span></span><span class=" subSepBtn"><span class="S5_submenu_item"><a href="javascript:;" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="javascript:;"">Dummy Sample Link </span></a></span></span><span class=" subSepBtn"><span class="S5_submenu_item"><a href="javascript:;" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="javascript:;"">Dummy Sample Link </span></a></span></span><span class=" subSepBtn"><span class="S5_submenu_item"><a href="javascript:;" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="javascript:;"">Dummy Sample Link </span></a></span></span><span class=" subSepBtn"><span class="S5_submenu_item"><a href="javascript:;" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="javascript:;"">Dummy Sample Link </span></a></span></span><span class=" subSepBtn"><span class="S5_submenu_item"><a href="javascript:;" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="javascript:;"">Dummy Sample Link</span></a></span></span></div></li><li class="subMenuParentBtn subMenuBtn subSepBtn"><span class="S5_submenu_item"><a href="javascript:;" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="javascript:;"">Menu With No Menu Icon</span></a><span class="S5_subtext" onclick="window.document.location.href="javascript:;"">Standard Sub Menu Link</span></span></li></ul></li></ul></div><div class="s5_sub_wrap_lower" id="ul_child_20"><ul style="margin-left: 0px; float: left;"><li id="li_child_20"><ul style="float:left;"><li class="subMenuParentBtn subMenuBtn subSepBtn"><span class="S5_submenu_item"><a href="javascript:;" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="javascript:;"">Dummy Item</span></a></span></li><li class="subMenuParentBtn subMenuBtn subSepBtn"><span class="S5_submenu_item"><a href="javascript:;" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="javascript:;"">Dummy Item </span></a></span></li><li class="subMenuParentBtn subParentBtn subSepBtn"><span class="S5_submenu_item"><a href="javascript:;" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="javascript:;"">Dummy Item </span></a></span></li></ul></li></ul></div><div class="s5_sub_wrap_lower" id="ul_child_23"><ul style="margin-left: 0px; float: left;"><li id="li_child_23"><ul style="float:left;"><li class="subMenuParentBtn subMenuBtn subSepBtn"><span class="S5_submenu_item"><a href="javascript:;" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="javascript:;"">Dummy Item</span></a></span></li><li class="subMenuParentBtn subMenuBtn subSepBtn"><span class="S5_submenu_item"><a href="javascript:;" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="javascript:;"">Dummy Item </span></a></span></li><li class="subMenuParentBtn subMenuBtn subSepBtn"><span class="S5_submenu_item"><a href="javascript:;" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="javascript:;"">Dummy Item </span></a></span></li></ul></li></ul></div><div class="s5_sub_wrap" id="ul_child_35"><ul style="margin-top: 0px; float: left;"><li id="li_child_35"><ul style="float:left;"><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><span class="s5_img_span"><img style="float:left;cursor:pointer" src="http://www.shape5.com/demo/swapps/images/stories/color_wheel.png" onclick="window.document.location.href='http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-specific-features'" alt="template-specific-features"></span><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-specific-features" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/features-mainmenu-47/template-specific-features"">Template Specific Features</span></a><span class="S5_subtext" onclick="window.document.location.href="/demo/swapps/index.php/features-mainmenu-47/template-specific-features"">Options For This Template</span></span></li><li class="subMenuParentBtn subMenuBtn subSepBtn"><span class="S5_submenu_item"><span class="s5_img_span"><img style="float:left;cursor:pointer" src="http://www.shape5.com/demo/swapps/images/stories/application_split.png" onclick="window.document.location.href='javascript:;'" alt="template-features"></span><a href="javascript:;" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="javascript:;"">Vertex Template Features</span></a><span class="S5_subtext" onclick="window.document.location.href="javascript:;"">Powerful Template Settings</span></span><div class="S5_grouped_child_item"><span><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-features/responsive-layout" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/features-mainmenu-47/template-features/responsive-layout"">Responsive Layout</span></a><span class="S5_subtext" onclick="window.document.location.href="/demo/swapps/index.php/features-mainmenu-47/template-features/responsive-layout"">Adapt to Any Screen Size</span></span></span><span><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-features/hide-content-and-modules" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/features-mainmenu-47/template-features/hide-content-and-modules"">Hide Content and Modules</span></a></span></span><span><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-features/info-slide-enabled" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/features-mainmenu-47/template-features/info-slide-enabled"">Info Slide Enabled</span></a></span></span><span><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-features/96-module-positions" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/features-mainmenu-47/template-features/96-module-positions"">96 Module Positions</span></a><span class="S5_subtext" onclick="window.document.location.href="/demo/swapps/index.php/features-mainmenu-47/template-features/96-module-positions"">Thousands of Layout Options</span></span></span><span><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-features/seo-optimized" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/features-mainmenu-47/template-features/seo-optimized"">SEO Optimized</span></a></span></span><span><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-features/mobile-device-ready" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/features-mainmenu-47/template-features/mobile-device-ready"">Mobile Device Ready</span></a></span></span><span><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-features/tool-tips-enabled" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/features-mainmenu-47/template-features/tool-tips-enabled"">Tool Tips Enabled</span></a></span></span><span><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-features/multibox-enabled" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/features-mainmenu-47/template-features/multibox-enabled"">Multibox Enabled</span></a></span></span><span><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-features/lazy-load-enabled" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/features-mainmenu-47/template-features/lazy-load-enabled"">Lazy Load Enabled</span></a></span></span><span><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-features/menu-scroll-to" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/features-mainmenu-47/template-features/menu-scroll-to"">Menu Scroll To</span></a></span></span><span><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-features/hide-article-component-area" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/features-mainmenu-47/template-features/hide-article-component-area"">Hide Article Component Area</span></a></span></span><span><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-features/parallax-backgrounds" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/features-mainmenu-47/template-features/parallax-backgrounds"">Parallax Backgrounds</span></a></span></span><span><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/template-features/drop-down-panel" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/features-mainmenu-47/template-features/drop-down-panel"">Drop Down Panel</span></a></span></span></div></li></ul><ul style="float:left;"><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><span class="s5_img_span"><img style="float:left;cursor:pointer" src="http://www.shape5.com/demo/swapps/images/stories/application_link.png" onclick="window.document.location.href='http://www.shape5.com/joomla/framework/vertex_framework.html'" alt="2013-05-12-04-20-05"></span><a href="http://www.shape5.com/joomla/framework/vertex_framework.html" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="http://www.shape5.com/joomla/framework/vertex_framework.html"">S5 Vertex Framework</span></a><span class="S5_subtext" onclick="window.document.location.href="http://www.shape5.com/joomla/framework/vertex_framework.html"">Learn More About Vertex</span></span></li><li class="subMenuParentBtn subMenuBtn subSepBtn"><span class="S5_submenu_item"><span class="s5_img_span"><img style="float:left;cursor:pointer" src="http://www.shape5.com/demo/swapps/images/stories/application_view_tile.png" onclick="window.document.location.href='javascript:;'" alt="continued-vertex-features"></span><a href="javascript:;" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="javascript:;"">Continued Vertex Features</span></a><span class="S5_subtext" onclick="window.document.location.href="javascript:;"">More Great S5 Vertex Options</span></span><div class="S5_grouped_child_item"><span><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/file-compression" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/file-compression"">File Compression</span></a></span></span><span><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/stock-photography" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/stock-photography"">Stock Photography</span></a></span></span><span><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/site-shaper-available" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/site-shaper-available"">Site Shaper Available</span></a></span></span><span><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/google-fonts-enabled" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/google-fonts-enabled"">Google Fonts Enabled</span></a></span></span><span><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/page-row-and-column-widths" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/page-row-and-column-widths"">Page, Row and Column Widths</span></a></span></span><span><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/typography" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/typography"">Typography</span></a></span></span><span><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/fluid-and-fixed-layouts" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/fluid-and-fixed-layouts"">Fluid and Fixed Layouts</span></a></span></span><span><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/fixed-side-tabs" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/fixed-side-tabs"">Fixed Side Tabs</span></a></span></span><span><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/3rd-party-component-compatible" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/3rd-party-component-compatible"">3rd Party Component Compatible</span></a></span></span><span><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/floating-menu" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/floating-menu"">Floating Menu</span></a></span></span><span><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/scroll-reveal" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/scroll-reveal"">Scroll Reveal</span></a></span></span><span><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/ion-icons-integrated" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/features-mainmenu-47/continued-vertex-features/ion-icons-integrated"">Ion Icons Integrated</span></a></span></span><span><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/?lang=ltr" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/?lang=ltr"">LTR Language</span></a></span></span><span><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/?lang=rtl" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/?lang=rtl"">RTL Language</span></a></span></span></div></li></ul></li></ul></div><div class="s5_sub_wrap" id="ul_child_40"><ul style="margin-top: 0px; float: left;"><li id="li_child_40"><ul style="float:left;"><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><span class="s5_img_span"><img style="float:left;cursor:pointer" src="http://www.shape5.com/demo/swapps/images/stories/help.png" onclick="window.document.location.href='http://www.shape5.com/joomla_tutorials.html'" alt="2013-05-12-04-56-04"></span><a href="http://www.shape5.com/joomla_tutorials.html" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="http://www.shape5.com/joomla_tutorials.html"">Joomla and Vertex Tutorials</span></a><span class="S5_subtext" onclick="window.document.location.href="http://www.shape5.com/joomla_tutorials.html"">Vertex and Joomla Tutorials</span></span></li><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/tutorials-menu-48/site-shaper-setup" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/tutorials-menu-48/site-shaper-setup"">Site Shaper Setup</span></a><span class="S5_subtext" onclick="window.document.location.href="/demo/swapps/index.php/tutorials-menu-48/site-shaper-setup"">Site Shapers Are Highly Recommended</span></span></li><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/tutorials-menu-48/installing-the-template" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/tutorials-menu-48/installing-the-template"">Installing The Template</span></a></span></li><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/tutorials-menu-48/setting-up-module-styles" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/tutorials-menu-48/setting-up-module-styles"">Setting Up Module Styles</span></a></span></li><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/tutorials-menu-48/configuring-the-template" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/tutorials-menu-48/configuring-the-template"">Configuring The Template</span></a></span></li><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/tutorials-menu-48/search-and-menus-setup" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/tutorials-menu-48/search-and-menus-setup"">Search and Menus Setup</span></a></span></li><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/index.php/tutorials-menu-48/s5-login-and-register-setup" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/index.php/tutorials-menu-48/s5-login-and-register-setup"">S5 Login and Register Setup</span></a></span></li></ul></li></ul></div><div class="s5_sub_wrap" id="ul_child_48"><ul style="margin-top: 0px; float: left;"><li id="li_child_48"><ul style="float:left;"><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/?theme=dark" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/?theme=dark"">Dark Style</span></a></span></li><li class="subMenuParentBtn subMenuBtn"><span class="S5_submenu_item"><a href="http://www.shape5.com/demo/swapps/?theme=light" tabindex="-1"><span class="s5_sub_a_span" onclick="window.document.location.href="/demo/swapps/?theme=light"">Light Style</span></a></span></li></ul></li></ul></div></div></body>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script > skrollr.decks.init({
segment: 'segment',
nav: 'body'
});
//# sourceURL=pen.js
</script>
</body></html>
