<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 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/eduardomalfabon/pen/OXZaXr?depth=everything&order=popularity&page=55&q=pack&show_forks=false" />
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400|Open+Sans:300,400,700" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/onepage-scroll/1.3.1/onepage-scroll.css'>
<style class="cp-pen-styles">body {
font-family: "Open-sans", sans-serif;
font-size: 13px;
line-height: 1.5;
color: #fff;
background-image: url("http://codecase.work/spirko/temp/bg.jpg");
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
}
p{ padding: 5px 0px;}
.container-section {
width: 50%;
position: absolute;
right: 0%;
top: 0%;
padding: 20px;
padding-right: 40px;
padding-top: 80px;
}
.center{
text-align: center;
}
header {
position: absolute;
top: 0;
left: 0;
z-index: 99;
width: 50%;
height: 100%;
}
html, body, #wrapper {
width: 100%;
height: 100%;
}
a {
display: inline-block;
text-decoration: none;
color: inherit;
}
/* Header */
header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.fixed-header {
background-color: #18181a;
background-repeat: no-repeat;
background-size: cover;
background-position: right top;
width: 40%;
min-width: 200px;
height: 100%;
position: absolute;
top: 0;
right: 99%;
}
.logo {
background-color: #18181a;
background-repeat: no-repeat;
background-size: cover;
background-position: right top;
width: 20%;
height: 100%;
min-width: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: all 0.25s linear;
transition: all 0.25s linear;
}
.logo:hover {
width: 12%;
}
.logo .logo-image {
width: 100%;
}
.logo .logo-image img {
width: 80%;
height: auto;
}
.viewing-page-1 .logo {
width: 40% !important;
}
/* Menu */
.main-menu {
background-position: right top;
background-repeat: no-repeat;
background-size: cover;
background-color: #1963c7;
background: -webkit-linear-gradient(top, rgba(17, 184, 187, 0.81) 0%, rgba(46, 68, 187, 0.84) 100%);
background: linear-gradient(to bottom, rgba(17, 184, 187, 0.81) 0%, rgba(46, 68, 187, 0.84) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#11b8bb', endColorstr='#2e44bb',GradientType=0 );
color: rgba(255, 255, 255, 0.65);
width: 40%;
height: 100%;
min-width: 190px;
max-width: 200px;
display: inline-block;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: all 0.15s linear;
transition: all 0.15s linear;
}
.main-menu:hover {
width: 40%;
max-width: 280px;
}
.main-menu .container {
width: 100%;
max-width: 200px;
box-sizing: border-box;
padding-left: 22px;
padding-right: 22px;
}
.main-menu .container .menu {
font-size: 35px;
font-weight: 100;
font-family: "Lato", "Open-sans", sans-serif;
text-transform: uppercase;
line-height: 0.8;
text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
padding-top: 80px;
}
.main-menu .container .menu .menu-item {
-webkit-transition: all 0.25s linear;
transition: all 0.25s linear;
}
.main-menu .container .menu .menu-item:hover {
color: deepskyblue;
text-shadow: 0px 0px 0px transparent;
}
.main-menu .container .menu .current-menu-item {
color: white;
font-weight: 300;
}
.main-menu .container .label {
font-size: 11px;
line-height: 1;
padding: 12px 0;
}
.main-menu .container .label.social-icons {
font-size: 22px;
color: #fff;
}
.main-menu .container .label.social-icons .icon {
padding-right: 12px;
-webkit-transition: all 0.25s linear;
transition: all 0.25s linear;
}
.main-menu .container .label.social-icons .icon:hover {
color: lightgray;
}
.skew {
-webkit-transform: skew(11deg);
transform: skew(11deg);
-webkit-transform-origin: top;
transform-origin: top;
}
.skew-fix {
-webkit-transform: skew(-11deg);
transform: skew(-11deg);
width: 100%;
}
/* GUI */
.hightlighted {
background: gold;
color: brown;
padding: 1px 2px;
-webkit-transition: all 0.15s linear;
transition: all 0.15s linear;
}
.hightlighted:hover {
background: deeppink;
color: #fff;
}
</style></head><body>
<div id="wrapper">
<header id="home">
<div class="fixed-header skew"></div>
<div class="logo skew">
<div class="skew-fix"><a href="#" class="logo-image"><img src="http://codecase.work/spirko/temp/logo.png"/></a></div>
</div>
<div class="main-menu skew">
<div class="container">
<ul class="menu onepage-pagination_s">
<li class="menu-item current-menu-item skew-fix"><a href="#">Home</a></li>
<li class="menu-item skew-fix"><a href="#">About</a></li>
<li class="menu-item skew-fix"><a href="#">Music</a></li>
<li class="menu-item skew-fix"><a href="#">Photos</a></li>
<li class="menu-item skew-fix"><a href="#">Video</a></li>
<li class="menu-item skew-fix"><a href="#">Contact</a></li>
</ul>
<div class="label skew-fix"><span>Want Spirko to play at your venue / party? <a href="#" class="hightlighted">Click here</a></span></div>
<div class="label social-icons skew-fix"><a href="https://twitter.com/spirkorock" class="icon twitter" target="_blank"><span class="fa fa-twitter"></span></a><a target="_blank" href="https://www.facebook.com/jeff.spirko" class="icon facebook"><span class="fa fa-facebook"></span></a></div>
</div>
</div>
</header>
<main class="main">
<section id="home">
<p>uno</p>
</section>
<section id="about">
<p>dos</p>
<div class="container-section">
<p> Jeff Spirko’s musical journey began at the young age of 3 years old in Syracuse, NY, where he began studying the classical violin. While growing up, with help from a very musical family Jeff played in orchestras, sang in choirs, and performed in musical theater productions. In high school, he earned All- New York State honors as both a violinist and a vocalist.
</p><p>
In addition to a rich musical background, athletics were just as much a part of everyday life growing up. In high school, Jeff was the captain of both the varsity lacrosse and soccer teams, earning All- New York State honors in lacrosse. After high school, Jeff attended Cornell University and was a member of the Varsity Men’s Lacrosse team, until an untimely knee injury ended his athletic career.
</p><p>
It was in the wake of this injury that his path changed courses. Learning to play the guitar, and perform around local bars, Jeff re-discovered his passion for music, both writing and performing. Honing his skills, he set out for Atlanta, GA after graduation, in search of a music career.
</p><p>
With a van packed, and his guitar and violin in the back seat, Jeff dove in to the Georgia music scene as a songwriter/ multi-instrumentalist (violin/ guitar/ mandolin/ piano/ banjo), playing with dozens of bands over many years, and sharing the stage with acts such as ZZ Top, Styx, Heart, Foreigner, Corey Smith, Love & Theft, Joe Nichols, among many others. In 2014, Jeff was voted ‘Instrumentalist of the Year’ by Atlanta, GA publication Creative Loafing.
</p><p>
In his new project, SPIRKO, Jeff steps from the side of the stage to the front, bringing with him an incredibly dynamic live show, catchy radio-friendly songs, and unique versatility as a performer.
</p><p>
Come along for the ride!</p><p>
<3 JS</p>
</div>
</section>
<section id="music">
<p>tres</p>
</section>
<section id="photos">
<p>tres</p>
</section>
<section id="video">
<p>tres</p>
</section>
<section id="contact">
<p>tres</p>
</section>
</main>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script > $(document).ready(function(){
$(".main").onepage_scroll();
$(".onepage-pagination li:first-child a").click();
setInterval(function(){
clase=$("body").attr("class");
clase=clase.substr(13);
$(".menu li").removeClass("current-menu-item");
$(".menu li:nth-child("+clase+")").addClass("current-menu-item");
},100);
$(".menu-item").click(function(){
var i = $(this).index()+1;
$(".onepage-pagination li:nth-child("+i+") a").click();
$(".menu-item").removeClass("current-menu-item");
$(this).addClass("current-menu-item");
});
$(".onepage-pagination li a").click(function(){
i= $(this).parent().index()+1;
$(".menu li").removeClass("current-menu-item");
$(".menu li:nth-child("+i+")").addClass("current-menu-item");
});
});
/* ===========================================================
* jquery-onepage-scroll.js v1.3.1
* ===========================================================
* Copyright 2013 Pete Rojwongsuriya.
* http://www.thepetedesign.com
*
* Create an Apple-like website that let user scroll
* one page at a time
*
* Credit: Eike Send for the awesome swipe event
* https://github.com/peachananr/onepage-scroll
*
* License: GPL v3
*
* ========================================================== */
!function($){
var defaults = {
sectionContainer: "section",
easing: "ease",
animationTime: 1000,
pagination: true,
updateURL: false,
keyboard: true,
beforeMove: null,
afterMove: null,
loop: true,
responsiveFallback: false,
direction : 'horizontal'
};
/*------------------------------------------------*/
/* Credit: Eike Send for the awesome swipe event */
/*------------------------------------------------*/
$.fn.swipeEvents = function() {
return this.each(function() {
var startX,
startY,
$this = $(this);
$this.bind('touchstart', touchstart);
function touchstart(event) {
var touches = event.originalEvent.touches;
if (touches && touches.length) {
startX = touches[0].pageX;
startY = touches[0].pageY;
$this.bind('touchmove', touchmove);
}
}
function touchmove(event) {
var touches = event.originalEvent.touches;
if (touches && touches.length) {
var deltaX = startX - touches[0].pageX;
var deltaY = startY - touches[0].pageY;
if (deltaX >= 50) {
$this.trigger("swipeLeft");
}
if (deltaX <= -50) {
$this.trigger("swipeRight");
}
if (deltaY >= 50) {
$this.trigger("swipeUp");
}
if (deltaY <= -50) {
$this.trigger("swipeDown");
}
if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) {
$this.unbind('touchmove', touchmove);
}
}
}
});
};
$.fn.onepage_scroll = function(options){
var settings = $.extend({}, defaults, options),
el = $(this),
sections = $(settings.sectionContainer)
total = sections.length,
status = "off",
topPos = 0,
leftPos = 0,
lastAnimation = 0,
quietPeriod = 500,
paginationList = "";
$.fn.transformPage = function(settings, pos, index) {
if (typeof settings.beforeMove == 'function') settings.beforeMove(index);
// Just a simple edit that makes use of modernizr to detect an IE8 browser and changes the transform method into
// an top animate so IE8 users can also use this script.
if($('html').hasClass('ie8')){
if (settings.direction == 'horizontal') {
var toppos = (el.width()/100)*pos;
$(this).animate({left: toppos+'px'},settings.animationTime);
} else {
var toppos = (el.height()/100)*pos;
$(this).animate({top: toppos+'px'},settings.animationTime);
}
} else{
$(this).css({
"-webkit-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)",
"-webkit-transition": "all " + settings.animationTime + "ms " + settings.easing,
"-moz-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)",
"-moz-transition": "all " + settings.animationTime + "ms " + settings.easing,
"-ms-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)",
"-ms-transition": "all " + settings.animationTime + "ms " + settings.easing,
"transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)",
"transition": "all " + settings.animationTime + "ms " + settings.easing
});
}
$(this).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
if (typeof settings.afterMove == 'function') settings.afterMove(index);
});
}
$.fn.moveDown = function() {
var el = $(this)
index = $(settings.sectionContainer +".active").data("index");
current = $(settings.sectionContainer + "[data-index='" + index + "']");
next = $(settings.sectionContainer + "[data-index='" + (index + 1) + "']");
if(next.length < 1) {
if (settings.loop == true) {
pos = 0;
next = $(settings.sectionContainer + "[data-index='1']");
} else {
return
}
}else {
pos = (index * 100) * -1;
}
if (typeof settings.beforeMove == 'function') settings.beforeMove( next.data("index"));
current.removeClass("active")
next.addClass("active");
if(settings.pagination == true) {
$(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active");
$(".onepage-pagination li a" + "[data-index='" + next.data("index") + "']").addClass("active");
}
$("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
$("body").addClass("viewing-page-"+next.data("index"))
if (history.replaceState && settings.updateURL == true) {
var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index + 1);
history.pushState( {}, document.title, href );
}
el.transformPage(settings, pos, next.data("index"));
}
$.fn.moveUp = function() {
var el = $(this)
index = $(settings.sectionContainer +".active").data("index");
current = $(settings.sectionContainer + "[data-index='" + index + "']");
next = $(settings.sectionContainer + "[data-index='" + (index - 1) + "']");
if(next.length < 1) {
if (settings.loop == true) {
pos = ((total - 1) * 100) * -1;
next = $(settings.sectionContainer + "[data-index='"+total+"']");
}
else {
return
}
}else {
pos = ((next.data("index") - 1) * 100) * -1;
}
if (typeof settings.beforeMove == 'function') settings.beforeMove(next.data("index"));
current.removeClass("active")
next.addClass("active")
if(settings.pagination == true) {
$(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active");
$(".onepage-pagination li a" + "[data-index='" + next.data("index") + "']").addClass("active");
}
$("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
$("body").addClass("viewing-page-"+next.data("index"))
if (history.replaceState && settings.updateURL == true) {
var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index - 1);
history.pushState( {}, document.title, href );
}
el.transformPage(settings, pos, next.data("index"));
}
$.fn.moveTo = function(page_index) {
current = $(settings.sectionContainer + ".active")
next = $(settings.sectionContainer + "[data-index='" + (page_index) + "']");
if(next.length > 0) {
if (typeof settings.beforeMove == 'function') settings.beforeMove(next.data("index"));
current.removeClass("active")
next.addClass("active")
$(".onepage-pagination li a" + ".active").removeClass("active");
$(".onepage-pagination li a" + "[data-index='" + (page_index) + "']").addClass("active");
$("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
$("body").addClass("viewing-page-"+next.data("index"))
pos = ((page_index - 1) * 100) * -1;
if (history.replaceState && settings.updateURL == true) {
var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (page_index - 1);
history.pushState( {}, document.title, href );
}
el.transformPage(settings, pos, page_index);
}
}
function responsive() {
//start modification
var valForTest = false;
var typeOfRF = typeof settings.responsiveFallback
if(typeOfRF == "number"){
valForTest = $(window).width() < settings.responsiveFallback;
}
if(typeOfRF == "boolean"){
valForTest = settings.responsiveFallback;
}
if(typeOfRF == "function"){
valFunction = settings.responsiveFallback();
valForTest = valFunction;
typeOFv = typeof valForTest;
if(typeOFv == "number"){
valForTest = $(window).width() < valFunction;
}
}
//end modification
if (valForTest) {
$("body").addClass("disabled-onepage-scroll");
$(document).unbind('mousewheel DOMMouseScroll MozMousePixelScroll');
el.swipeEvents().unbind("swipeDown swipeUp");
} else {
if($("body").hasClass("disabled-onepage-scroll")) {
$("body").removeClass("disabled-onepage-scroll");
$("html, body, .wrapper").animate({ scrollTop: 0 }, "fast");
}
el.swipeEvents().bind("swipeDown", function(event){
if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault();
el.moveUp();
}).bind("swipeUp", function(event){
if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault();
el.moveDown();
});
$(document).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(event) {
event.preventDefault();
var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
init_scroll(event, delta);
});
}
}
function init_scroll(event, delta) {
deltaOfInterest = delta;
var timeNow = new Date().getTime();
// Cancel scroll if currently animating or within quiet period
if(timeNow - lastAnimation < quietPeriod + settings.animationTime) {
event.preventDefault();
return;
}
if (deltaOfInterest < 0) {
el.moveDown()
} else {
el.moveUp()
}
lastAnimation = timeNow;
}
// Prepare everything before binding wheel scroll
el.addClass("onepage-wrapper").css("position","relative");
$.each( sections, function(i) {
$(this).css({
position: "absolute",
top: topPos + "%"
}).addClass("section").attr("data-index", i+1);
$(this).css({
position: "absolute",
left: ( settings.direction == 'horizontal' )
? leftPos + "%"
: 0,
top: ( settings.direction == 'vertical' || settings.direction != 'horizontal' )
? topPos + "%"
: 0
});
if (settings.direction == 'horizontal')
leftPos = leftPos + 100;
else
topPos = topPos + 100;
if(settings.pagination == true) {
paginationList += "<li><a data-index='"+(i+1)+"' href='#" + (i+1) + "'></a></li>"
}
});
el.swipeEvents().bind("swipeDown", function(event){
if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault();
el.moveUp();
}).bind("swipeUp", function(event){
if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault();
el.moveDown();
});
// Create Pagination and Display Them
if (settings.pagination == true) {
if ($('ul.onepage-pagination').length < 1) $("<ul class='onepage-pagination'></ul>").prependTo("body");
if( settings.direction == 'horizontal' ) {
posLeft = (el.find(".onepage-pagination").width() / 2) * -1;
el.find(".onepage-pagination").css("margin-left", posLeft);
} else {
posTop = (el.find(".onepage-pagination").height() / 2) * -1;
el.find(".onepage-pagination").css("margin-top", posTop);
}
$('ul.onepage-pagination').html(paginationList);
}
if(window.location.hash != "" && window.location.hash != "#1") {
init_index = window.location.hash.replace("#", "")
if (parseInt(init_index) <= total && parseInt(init_index) > 0) {
$(settings.sectionContainer + "[data-index='" + init_index + "']").addClass("active")
$("body").addClass("viewing-page-"+ init_index)
if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + init_index + "']").addClass("active");
next = $(settings.sectionContainer + "[data-index='" + (init_index) + "']");
if(next) {
next.addClass("active")
if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + (init_index) + "']").addClass("active");
$("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
$("body").addClass("viewing-page-"+next.data("index"))
if (history.replaceState && settings.updateURL == true) {
var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (init_index);
history.pushState( {}, document.title, href );
}
}
pos = ((init_index - 1) * 100) * -1;
el.transformPage(settings, pos, init_index);
} else {
$(settings.sectionContainer + "[data-index='1']").addClass("active")
$("body").addClass("viewing-page-1")
if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='1']").addClass("active");
}
}else{
$(settings.sectionContainer + "[data-index='1']").addClass("active")
$("body").addClass("viewing-page-1")
if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='1']").addClass("active");
}
if(settings.pagination == true) {
$(".onepage-pagination li a").click(function (){
var page_index = $(this).data("index");
el.moveTo(page_index);
});
}
$(document).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(event) {
event.preventDefault();
var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
if(!$("body").hasClass("disabled-onepage-scroll")) init_scroll(event, delta);
});
if(settings.responsiveFallback != false) {
$(window).resize(function() {
responsive();
});
responsive();
}
if(settings.keyboard == true) {
$(document).keydown(function(e) {
var tag = e.target.tagName.toLowerCase();
if (!$("body").hasClass("disabled-onepage-scroll")) {
switch(e.which) {
case 38:
if (tag != 'input' && tag != 'textarea') el.moveUp()
break;
case 40:
if (tag != 'input' && tag != 'textarea') el.moveDown()
break;
case 32: //spacebar
if (tag != 'input' && tag != 'textarea') el.moveDown()
break;
case 33: //pageg up
if (tag != 'input' && tag != 'textarea') el.moveUp()
break;
case 34: //page dwn
if (tag != 'input' && tag != 'textarea') el.moveDown()
break;
case 36: //home
el.moveTo(1);
break;
case 35: //end
el.moveTo(total);
break;
default: return;
}
}
});
}
return false;
}
}(window.jQuery);
//# sourceURL=pen.js
</script>
</body></html>
