View source for Team:CHINA CD UESTC/homeDemo

<!DOCTYPE html>
<!-- saved from url=(0028)http://www.whitefrontier.ch/ -->
<html lang="en" class="js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths wf-brandongrotesque-i4-active wf-brandongrotesque-i7-active wf-brandongrotesque-n4-active wf-brandongrotesque-n7-active wf-dincondensedweb-n4-active wf-freightbigpro-i4-active wf-freightbigpro-i7-active wf-freightbigpro-n4-active wf-freightbigpro-n7-active wf-active">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <!-- CSS 	
    <link rel="stylesheet" type="text/css" href="./css/home.css">
-->

    <style type="text/css">
.unselect {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.ir {
	font: 0/0 a;
	text-shadow: none;
	color: transparent;
}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.clearfix {
	display: inline-block;
}
html[xmlns] .clearfix {
	display: block;
}
* html .clearfix {
	height: 1%;
}
.middleHack {
	zoom: 1;
}
.ib {
	display: -moz-inline-stack !important;
	display: inline-block !important;
	vertical-align: top;
}
.ibIe {
	display: inline !important;
	zoom: 1;
}
.lt-ie8 .ib {
	display: inline !important;
	zoom: 1;
}
.bgCover {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.clear {
	clear: both;
	display: block;
}
.translate3d {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.translate {
	-webkit-transform: translate(0, 0);
	-moz-transform: translate3d(0, 0);
	-ms-transform: translate3d(0, 0);
	-o-transform: translate3d(0, 0);
	transform: translate3d(0, 0);
}
.noflick {
	-webkit-backface-visibility: hidden;
}
a img {
	border: none;
}
.overflow {
	overflow: hidden;
}
.bgwidth {
	width: 100%;
}
.bgheight {
	height: 100%;
}
aside {
	width: 260px;
	height: 100%;
	background-color: #000;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 11111111;
	-webkit-transition: all 200ms ease-out;
	-moz-transition: all 200ms ease-out;
	-ms-transition: all 200ms ease-out;
	-o-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	text-decoration: none;
}
aside #logo {
	text-indent: -6000px;
	margin: 0px 32px 0px 32px;
	display: block;
}
aside #logo img {
	display: block;
	text-decoration: none;
	width: 100%;
}
aside .separator {
	background: url("https://static.igem.org/mediawiki/2015/d/df/CD_UESTC_Separator.jpg") no-repeat top left transparent;
	display: block;
	zoom: 1;
	background-position: -23px -296px;
	width: 143px;
	height: 3px;
	text-indent: -6000px;
	text-align: left;
	margin: 25px auto;
}
aside nav {
	font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
	padding: 0 0 0 0 px;
}
aside nav a {
	color: #ddd7d7;
	line-height: 40px;
	text-align: center;
	text-decoration: none;
	font-size: 23px;
	display: block;
	letter-spacing: 2px;
}
aside nav a .text {
	font-size: 16px;
	font-family: "Open Sans";
	display: inline-block;
	position: relative;
	line-height: normal;
}
aside nav a .text span {
	background: url("../num/15.png") no-repeat top left transparent;
	display: block;
	zoom: 1;
	background-position: -23px -296px;
	width: auto;
	height: 3px;
	text-indent: -6000px;
	text-align: left;
	position: absolute;
	bottom: -2px;
	left: 50%;
	right: 50%;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: all 200ms ease-out;
	-moz-transition: all 200ms ease-out;
	-ms-transition: all 200ms ease-out;
	-o-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
}
aside nav a.selected .text span {
	left: 0%;
	right: 2%;
	opacity: 1;
	filter: alpha(opacity=100);
}
aside .contact {
	font-family: 'freight-big-pro';
	font-size: 24px;
	font-weight: 400;
	font-style: italic;
	text-align: center;
	display: block;
	margin: 0 40px;
	text-decoration: none;
	color: #ffffff;
}
aside .bottom {
	position: absolute;
	bottom: 7px;
	left: 0;
	right: 0;
}
aside .bottom .social {
	text-align: center;
}
aside .bottom .social a {
	display: inline-block;
	border: 2px solid #ffffff;
	margin: 0 1px;
	margin-bottom: 3px;
	position: relative;
	width: 24px;
	height: 25px;
	-webkit-transition: all 200ms ease-out;
	-moz-transition: all 200ms ease-out;
	-ms-transition: all 200ms ease-out;
	-o-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
}
.no-touch aside nav a:hover {
	color: #FFFFFF;
}
.no-touch aside nav a.selected:hover {
	color: #ddd7d7;
}
body.opened aside {
	left: 0px;
}
body.opened aside #mobileMenuButton span {
	opacity: 0;
	filter: alpha(opacity=0);
}
body.opened aside #mobileMenuButton span:first-child {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: translate(0px, 7px) rotate(45deg);
	-moz-transform: translate(0px, 7px) rotate(45deg);
	-ms-transform: translate(0px, 7px) rotate(45deg);
	-o-transform: translate(0px, 7px) rotate(45deg);
	transform: translate(0px, 7px) rotate(45deg);
}
body.opened aside #mobileMenuButton span:last-child {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: translate(0px, -7px) rotate(-45deg);
	-moz-transform: translate(0px, -7px) rotate(-45deg);
	-ms-transform: translate(0px, -7px) rotate(-45deg);
	-o-transform: translate(0px, -7px) rotate(-45deg);
	transform: translate(0px, -7px) rotate(-45deg);
}
body.opened #realcontent {
	left: 100px;
	opacity: 0.2 !important;
	pointer-events: none;
}
body {
	background: #2d2c41;
	font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
}
ul {
	list-style-type: none;
}
/* ----------------------------
             menu
 -----------------------------*/
ul {
	list-style-type: none !important;
}
li {
	list-style-type: none !important;
}
.accordion {
	width: 100%;
	max-width: 180px;
	background: #303030;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	list-style-type: none !important;
	margin-left: 40px;
}
.accordion li {
	list-style-type: none !important;
	list-style: none;
}
.accordion .link {
	cursor: pointer;
	display: block;
	padding: 7px 7px 7px 30px;
	color: #FFF;
	font-size: 17px;
	font-weight: 700;
	border-bottom: 1px solid #CCC;
	position: relative;
}
.accordion li:last-child .link {
	border-bottom: 0;
}
.accordion li.open .link {
	color: #FFE153;
}
.submenu {
	display: none;
	background: #444359;
	font-size: 5px;
	list-style-type: none !important;
}
.submenu li {
	border-bottom: 1px solid #4b4a5e;
	list-style-type: none !important;
	list-style: none;
}
.submenu a {
	display: block;
	text-decoration: none;
	color: #d9d9d9;
}
.submenu a:hover {
	background: #b63b4d;
	color: #FFF;
}
#menuHome {
	color: #FFF;
	font-size: 17px;
	margin-right: 60px;
}
#menuHome:hover {
	color: #FFE153;
}
/*menu css over*/

#realcontent #homeIndex {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
#realcontent #homeIndex .contentInner {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
#realcontent #homeIndex a {
	overflow: hidden;
}
#realcontent #homeIndex a img.fullBg {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
#realcontent #homeIndex a .overlay {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #262626;
	opacity: 0.5;
	filter: alpha(opacity=50);
	-webkit-transition: all 200ms ease-out;
	-moz-transition: all 200ms ease-out;
	-ms-transition: all 200ms ease-out;
	-o-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
	z-index: 1;
}
#realcontent #homeIndex a .title {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 10;
	-webkit-backface-visibility: hidden;
}
#realcontent #homeIndex a video {
	position: absolute;
	left: 0;
	right: 0;
	opacity: 0;
	filter: alpha(opacity=0);
}
#realcontent #homeIndex a .gallery {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	filter: alpha(opacity=0);
}
#realcontent #homeIndex a .gallery img {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
#realcontent #homeIndex a .gallery img.active {
	z-index: 4;
}
#realcontent #homeIndex a .gallery img.lastActive {
	z-index: 3;
}
#realcontent #homeIndex .beer {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 44%;
	background: url("https://static.igem.org/mediawiki/2015/c/cc/Bg_beer.jpg") repeat center center #f2f2f2;
}
#realcontent #homeIndex .beer .overlay {
	opacity: 0.2;
	filter: alpha(opacity=20);
}
#realcontent #homeIndex .beer span {
	display: block;
}
#realcontent #homeIndex .beer .middle {
	width: 100%;
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
}
#realcontent #homeIndex .beer .title {
	background: url("https://static.igem.org/mediawiki/2015/4/4e/CD_UESTC_sprite.png") no-repeat top left transparent;
	display: block;
	zoom: 1;
	background-position: 0px 0px;
	width: 221px;
	height: 225px;
	text-indent: -6000px;
	text-align: left;
	position: relative;
	top: auto;
	left: auto;
	margin: 0 auto;
	margin-bottom: 50px;
}
#realcontent #homeIndex .beer .swipe {
	overflow: hidden;
	visibility: hidden;
	position: relative;
}
#realcontent #homeIndex .beer .swipe .swipe-wrap {
	overflow: hidden;
	position: relative;
}
#realcontent #homeIndex .beer .swipe .swipe-wrap div {
	float: left;
	width: 100%;
	position: relative;
}
#realcontent #homeIndex .beer .swipe .swipe-wrap div img {
	width: 20%;
	height: 20%;
	display: block;
	margin: 0 auto;
	max-height: 80%;
}
#realcontent #homeIndex .beer:hover .overlay {
	opacity: 0;
	filter: alpha(opacity=0);
}
#realcontent #homeIndex .experience {
	position: fixed;
	top: 0;
	left: 44%;
	right: 0;
	height: 50%;
	background: url("https://static.igem.org/mediawiki/2015/5/5f/CD_UESTC_bg_experience.jpg") no-repeat center center #f2f2f2;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100%;
}
#realcontent #homeIndex .experience .title {
	background: url("https://static.igem.org/mediawiki/2015/4/4e/CD_UESTC_sprite.png") no-repeat top left transparent;
	display: block;
	zoom: 1;
	background-position: -260px -4px;
	width: 289px;
	height: 140px;
	text-indent: -6000px;
	text-align: left;
	margin-left: -145px;
	margin-top: -70px;
}
#realcontent #homeIndex .ambassador {
	position: absolute;
	top: 50%;
	left: 44%;
	right: 28%;
	bottom: 0;
	background: url("../pic/bg_ambassador.jpg") no-repeat center center #f2f2f2;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#realcontent #homeIndex .ambassador .title {
	background: url("https://static.igem.org/mediawiki/2015/4/4e/CD_UESTC_sprite.png") no-repeat top left transparent;
	display: block;
	zoom: 1;
	background-position: -578px -4px;
	width: 274px;
	height: 157px;
	text-indent: -6000px;
	text-align: left;
	margin-top: -78px;
	margin-left: -137px;
}
#realcontent #homeIndex .social {
	position: absolute;
	top: 50%;
	left: 72%;
	right: 0;
	bottom: 0;
	background: url("../pic/bg_social.jpg") no-repeat center center #f2f2f2;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#realcontent #homeIndex .social .title {
	background: url("https://static.igem.org/mediawiki/2015/4/4e/CD_UESTC_sprite.png") no-repeat top left transparent;
	display: block;
	zoom: 1;
	background-position: -892px 0px;
	width: 250px;
	height: 144px;
	text-indent: -6000px;
	text-align: left;
	margin-top: -72px;
	margin-left: -125px;
}
.no-touch #realcontent #homeIndex a:hover .overlay {
	opacity: 0;
	filter: alpha(opacity=0);
}
.touch #realcontent #homeIndex a.beer .overlay {
	opacity: 0;
	filter: alpha(opacity=0);
	display: none;
}
* {
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.no-touch * {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
div, h1, h2, h3, h4, span, p, img, a {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
h1, h2, h3, h4, h5, h6 {
  color: black;
  background: none;
  font-weight: normal;
  margin: 0;
  padding-top: .5em;
  padding-bottom: .17em;
  border-bottom:none;
}
a {
	color: #FFFFFF;
	text-decoration: underline;
}
.fa {
	text-shadow: rgba(0,0,0,0.01) 0 0 1px;
	-webkit-text-stroke: 0.10px;
}
img {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	user-drag: none;
}
html, body {
	min-height: 100%;
	width: 100%;
	height: 100%;
	background: #000000;
	color: #ffffff;
	overflow: hidden;
	font-family: 'din-condensed-web';
	font-size: 14px;
	font-weight: 400;
}
#realcontent {
	position: absolute;
	left: 260px;
	top: 0;
	right: 0;
	height: 100%;
	overflow: hidden;
	-webkit-transition: all 200ms ease-out;
	-moz-transition: all 200ms ease-out;
	-ms-transition: all 200ms ease-out;
	-o-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.fullBg {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.fullBg.display {
	display: block;
}
.layoutHide {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 0%;
	background: #000000;
	z-index: 40;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
	background: url(".../.../static/img/layout_hide.jpg") repeat top left transparent;
}
 @media screen and (max-height: 780px) {
html body aside #logo {
	margin-top: 0px;
	margin-bottom: 0px;
}
html body aside nav a {
	line-height: 35px;
	font-size: 18px;
}
html body aside .separator {
	margin: 20px auto;
}
html body aside .contact {
	font-size: 18px;
}
}
@media screen and (max-height: 680px) {
html body aside #logo {
	margin-top: 0px;
	margin-bottom: 0px;
}
html body aside nav a {
	line-height: 31px;
	font-size: 18px;
}
html body aside .separator {
	margin: 10px auto;
}
}
@media screen and (max-width: 1050px) {
html aside {
	width: 200px;
}
html aside #logo {
	margin-left: 20px;
	margin-right: 20px;
}
html #realcontent {
	left: 200px;
}
}
@media screen and (max-width: 1200px) {
html #realcontent #homeIndex a .title {
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	-ms-transform: scale(0.7);
	-o-transform: scale(0.7);
	transform: scale(0.7);
}
html #realcontent #homeIndex .beer .title {
	margin-bottom: 20px;
}
html #realcontent #homeIndex .beer {
	background-size: 150%;
}
}
@media screen and (max-width: 900px) {
html #realcontent #homeIndex .experience {
	height: 40%;
}
html #realcontent #homeIndex .ambassador {
	top: 40%;
	right: 0;
	bottom: auto;
	height: 30%;
}
html #realcontent #homeIndex .social {
	left: 44%;
	top: 70%;
}
}
 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
html .beerDetails .middle {
	-webkit-transform: translate(0, 0) scale(0.9);
	-moz-transform: translate(0, 0) scale(0.9);
	-ms-transform: translate(0, 0) scale(0.9);
	-o-transform: translate(0, 0) scale(0.9);
	transform: translate(0, 0) scale(0.9);
}
}
 @media screen and (max-width: 700px) {
html #awwwards {
	display: none;
}
html aside {
	left: -200px;
}
html aside #mobileMenuButton {
	display: block;
}
html #realcontent {
	left: 0;
	right: auto;
	width: 100%;
}
}
/*float realcontent*/
#content {
	width: auto;
	height: 2000px;
}
.firstHeading {
	display: none;
}
#top {
	display: none;
}
h1 {
	text-decoration: none;
	font-size: 100%;
}
</style>
    </head>
    <body id="homeIndexBody">
<aside>
      <div id="mobileMenuButton"> <span></span> <span></span> <span></span> </div>
      <h1 id="logo"> <img alt="White Frontier Brewery" src="https://static.igem.org/mediawiki/2015/b/bb/CD_UESTC_whitefrontier.png"> </h1>
      <div class="separator"></div>
      <nav > 
    <!-- Contenedor -->
    <ul id="accordion" class="accordion">
          <li>
        <div class="link"><a id="menuHome" href="./home.html">HOME</a></div>
      </li>
          <li>
        <div class="link">PROJECT</div>
        <ul class="submenu">
              <li><a href="#">Problem</a></li>
              <li><a href="#">Design</a></li>
              <li><a href="#">Parts</a></li>
            </ul>
      </li>
          <li>
        <div class="link">RESULTS</div>
        <ul class="submenu">
              <li><a href="#">Results</a></li>
              <li><a href="#">Future</a></li>
            </ul>
      </li>
          <li>
        <div class="link">MODELING</div>
        <ul class="submenu">
              <li><a href="#">Modeling</a></li>
            </ul>
      </li>
          <li>
        <div class="link">TEAM</div>
        <ul class="submenu">
              <li><a href="./teamMembers.html">Members</a></li>
              <li><a href="#">Instructors</a></li>
              <li><a href="#">Attributions</a></li>
            </ul>
      </li>
          <li>
        <div class="link">HUMAN PRACTICES</div>
        <ul class="submenu">
              <li><a href="#">Google</a></li>
              <li><a href="#">Bing</a></li>
            </ul>
      </li>
          <li>
        <div class="link">NOTEBOOK</div>
        <ul class="submenu">
              <li><a href="#">Journal</a></li>
              <li><a href="#">Safety</a></li>
              <li><a href="#">Protocol</a></li>
            </ul>
      </li>
        </ul>
  </nav>
      <div class="separator"></div>
    </aside>
<div id="realcontent">
      <div id="homeIndex">
    <div class="contentInner"> <a href="/our-beers" class="beer middleParent">
      <div class="layoutHide"></div>
      <span class="overlay"></span> <span class="middle">
      <h1 class="title">Beer</h1>
      <span class="swipe" id="swipeBeer"> <span class="swipe-wrap">
      <div> <img alt="Backside Montfort" src="./pic/backside-montfort-wide-setup.png" /> </div>
      <div> <img alt="La Bruson" src="./pic/la-bruson-wide-setup.png" /> </div>
      <div> <img alt="Les Faverges" src="./pic/les-faverges-wide-setup.png" /> </div>
      <div> <img alt="La Bise" src="./pic/la-bise.png" /> </div>
      </span> </span> </span> </a> <a href="/experience" class="experience">
      <div class="layoutHide"></div>
      <img class="fullBg"  onmouseover="experienceGalleryNext()"/> <span class="overlay"></span>
      <h2 class="title">Let's discover our experience White Frontier Brewery</h2>
      <div class="gallery"> <img src="./pic/resto-ambiance-bw.jpg" class="fullBg display active" /> <img src="./pic/white-frontier-bear2.jpg" class="fullBg display " /> <img src="./pic/white-frontier-faverge-bw.jpg" class="fullBg display " /> <img src="./pic/white-frontier-beers-bw.jpg" class="fullBg display " /> </div>
      </a> <a href="/ambassadors/ambassadors-xav-de-le-rue" class="ambassador">
      <div class="layoutHide"></div>
      <img class="fullBg"   /> <span class="overlay"></span>
      <h2 class="title">Ambassador</h2>
      </a> <a href="/social" class="social" >
      <div class="layoutHide"></div>
      <img class="fullBg"  /> <span class="overlay"></span>
      <h2 class="title">Social #WhiteFrontier</h2>
      </a> </div>
  </div>
    </div>
<script type="text/javascript" src="https://2015.igem.org/Team:CHINA_CD_UESTC/homeJS.js?action=raw&ctype=text/js"></script> 
<script type="text/javascript">
  //slide menu
  $(function() {
    var Accordion = function(el, multiple) {
        this.el = el || {};
        this.multiple = multiple || false;

        // Variables privadas
        var links = this.el.find('.link');
        // Evento
        links.on('mouseenter', {el: this.el, multiple: this.multiple}, this.dropdown)
    }


    Accordion.prototype.dropdown = function(e) {
        var $el = e.data.el;
            $this = $(this),
            $next = $this.next();

        $next.slideToggle();
        $this.parent().toggleClass('open');

        if (!e.data.multiple) {
            $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
        };
    }   

    var accordion = new Accordion($('#accordion'), false);
});</script> 
<script type="text/javascript">//<![CDATA[
var controllerName="home";
var actionName="index";
var base="";
var baseLang="/en";
var lang="en";
data=[];//]]>
	</script> 
<script type="text/javascript">
 //experienceIntercal change
        var experienceInterval;
        function experienceGalleryNext() {
            var $active = $('#realcontent #homeIndex a.experience .gallery img.active');
            if ( $active.length == 0 ) $active = $('#realcontent #homeIndex a.experience .gallery img:last');
            var $next =  $active.next().length ? $active.next() : $('#realcontent #homeIndex a.experience .gallery img:first');
            $active.addClass('lastActive');
            $next.css({opacity: 0.0})
                .addClass('active')
                .animate({opacity: 1.0}, 700, function() {
                    $active.removeClass('active lastActive');
                });
        }
        $('.no-touch #realcontent #homeIndex a.experience').hover(function(){
            var $gallery = $(this).find('.gallery');
            $gallery.stop().animate({
                scale:1,
                opacity:1
            },500, 'easeOutCubic');
            experienceInterval = window.setInterval(experienceGalleryNext, 1000);
        }, function(){
            window.clearInterval(experienceInterval);
            var $gallery = $(this).find('.gallery');
            $gallery.stop().animate({
                scale:1.5,
                opacity:0
            },500, 'easeOutCubic', function(){
                window.clearInterval(experienceInterval);
            });
        });



        // swipe beer
        var swipeBeer = new Swipe(document.getElementById('swipeBeer'), {
            speed: 400,
            auto: false,

            continuous: true,
            disableScroll: false,
            stopPropagation: false,
            callback: function(index, elem) {},
            transitionEnd: function(index, elem) {}
        });

        var timeout;
        function again()
        {
            window.clearTimeout(timeout);
            timeout = window.setTimeout(function(){
                swipeBeer.next();
                again();
            }, 1400);
        }
        $('.no-touch #realcontent #homeIndex a.beer').hover(function(){
            swipeBeer.next();
            again();
        }, function(){
            window.clearTimeout(timeout);
        });

     </script>
</body>
</html>