@font-face {
    font-family: 'casino_handregular';
    src: url('../fonts/casinohand-webfont.eot');
    src: url('../fonts/casinohand-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/casinohand-webfont.woff2') format('woff2'),
         url('../fonts/casinohand-webfont.woff') format('woff'),
         url('../fonts/casinohand-webfont.ttf') format('truetype'),
         url('../fonts/casinohand-webfont.svg#casino_handregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'metabook';
    src: url('../fonts/metabook-roman-webfont.eot');
    src: url('../fonts/metabook-roman-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/metabook-roman-webfont.woff2') format('woff2'),
         url('../fonts/metabook-roman-webfont.woff') format('woff'),
         url('../fonts/metabook-roman-webfont.ttf') format('truetype'),
         url('../fonts/metabook-roman-webfont.svg#metabook-roman-webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'metabold';
    src: url('../fonts/metabold-roman-webfont.eot');
    src: url('../fonts/metabold-roman-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/metabold-roman-webfont.woff2') format('woff2'),
         url('../fonts/metabold-roman-webfont.woff') format('woff'),
         url('../fonts/metabold-roman-webfont.ttf') format('truetype'),
         url('../fonts/metabold-roman-webfont.svg#metabold-roman-webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'metabooklf';
    src: url('../fonts/metabooklf-roman-webfont.eot');
    src: url('../fonts/metabooklf-roman-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/metabooklf-roman-webfont.woff2') format('woff2'),
         url('../fonts/metabooklf-roman-webfont.woff') format('woff'),
         url('../fonts/metabooklf-roman-webfont.ttf') format('truetype'),
         url('../fonts/metabooklf-roman-webfont.svg#metabooklf-roman-webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

html { font-size: 16px; }
body.home {
    background: #002457;
    	background: #00123d;
    	
    /*background: -webkit-linear-gradient(180deg, #176ccc, #7bd5f2, #005482, #00426f, #002457 85%); /* For Safari 5.1 to 6.0 */
    /*background: -o-linear-gradient(180deg, #176ccc, #7bd5f2, #005482, #00426f, #002457 85%); /* For Opera 11.1 to 12.0 */
    /*background: -moz-linear-gradient(180deg, #176ccc, #7bd5f2, #005482, #00426f, #002457 85%); /* For Firefox 3.6 to 15 */
    /*background: linear-gradient(180deg, #176ccc, #7bd5f2, #005482, #00426f, #002457 85%); /* Standard syntax (must be last) */
}

SUP {
	font-size: 50%;
      top: -0.9em;
}

.nowrap {
	white-space: nowrap;
}

.block {
	display: block;
}


.white {
	color: #fff !important;
}

body {
    font-family: 'metabook';
    font-size: 62.5%; /* 10px based on html 16px */
    background: #00123d;
}

/*
@media (max-width:1024px) and (orientation: landscape) {
	body {
		background: #00123d;
	}
}
*/

.nav-overlay {
    width: 100%;
    height: 100%;
    background: url('../img/overlay.png') repeat top center;
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 999;
}
.navbar-toggle-overlay .icon-bar.up {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 19px;
}
.navbar-toggle-overlay .icon-bar.down {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: absolute;
    top: 19px;
}
.navbar-toggle-overlay .icon-bar.hideme {
    -webkit-transition: opacity .1s !important;
    -moz-transition: opacity .1s !important;
    -ms-transition: opacity .1s !important;
    -o-transition: opacity .1s !important;
    transition: opacity .1s !important;
    opacity: 0;
}
.navbar-toggle .icon-bar.up {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    position: absolute;
    top: 13px;
}
.navbar-toggle .icon-bar.down {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    top: 23px;
    position: absolute;
}
.navbar-toggle .icon-bar.hideme {
    -webkit-transition: opacity .1s !important;
    -moz-transition: opacity .1s !important;
    -ms-transition: opacity .1s !important;
    -o-transition: opacity .1s !important;
    transition: opacity .1s !important;
    opacity: 1;
    top: 16px;
    position: absolute;
}
.nav-overlay ul { margin: 150px 0px 0px; padding: 0px; }
.nav-overlay ul li { list-style-type: none; text-align: right; margin: 10px 40px 10px 0px; font-size: 3em; }
.nav-overlay ul li a, .nav-overlay ul li a:visited { color: #fff; }
.nav-overlay ul li a:hover { color: #ffde00; text-decoration: none; }

.how-it-works, .about { 
    background:  url('../img/wood-bg.png') repeat top center;
    background-size: 100%;
}
.how-it-works p, .about p {padding: 10px 20px; font-size: 1.8em; color: #fff;} 
.how-it-works p span, .about p span { color: #ffde00; }
.how-it-works h1, .about h1 { color: #fff; font-size: 3em; text-align: center; }

.rope1 {position: absolute; top: -111px; left: 15%;}
.rope2 {position: absolute; top: -111px; right: 15%;}

.bordered {border-top: 1px solid #ffde00; border-bottom: 1px solid #ffde00; margin: 30px auto; padding: 30px 0px;}
.centered {text-align: center;}
.step {margin: 30px auto 7px; display: block;}

.jumbotron.sign-content {
    color: #fff; 
    border-top: 1px solid #ffde00; 
    margin: 90px auto 0px;
    width: 90%; 
    overflow: auto; 
    padding: 10px !important;
}
.jumbotron.sign-content p { text-align: left; }
.btn-holder {margin: 0px auto; width: 90%; border-top: 1px solid #ffde00; text-align: center;}

/*--- bootstrap overrides --*/
.navbar-default { background: transparent; border: 0px; border-radius: 0px; box-shadow: none; z-index: 999; }
.navbar-default .navbar-toggle, .navbar-default .navbar-toggle-overlay {
    display: block;
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 15px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    border-color: #fff;
}
.navbar-default .navbar-toggle-overlay {outline: 0;}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: transparent; }
.navbar-default .navbar-toggle .icon-bar, .navbar-toggle-overlay .icon-bar { 
    background-color: #fff; 
    -webkit-transition: top .1s, transform 0.1s;
    -moz-transition: top .1s, transform 0.1s;
    transition: top .1s, transform 0.1s;
}
.navbar-toggle .icon-bar, .navbar-toggle-overlay .icon-bar { display: block; width: 23px; height: 3px; border-radius: 2px; }
.navbar-header { float: none; }


.overlay-close {
    display: block;
    position: relative;
    float: right;
    padding: 0px;
    margin-top: -11px;
    margin-right: -5px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 0px solid transparent;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    border-color: #fff;
}
.overlay-close .icon-bar { 
    background-color: #fff; 
    -webkit-transition: top .1s, transform 0.1s;
    -moz-transition: top .1s, transform 0.1s;
    transition: top .1s, transform 0.1s;
}
.overlay-close .icon-bar { display: block; width: 23px; height: 3px; border-radius: 2px; }
.overlay-close .icon-bar.up {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 19px;
}
.overlay-close .icon-bar.down {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: absolute;
    top: 19px;
}


.jumbotron { padding: 0px 15px; margin-bottom: 0px; color: inherit; background: transparent; }
.jumbotron .container { text-align: center; z-index: 99; position: relative; }
.jumbotron h1, .jumbotron .h1, h1 { color: #ffde00; font-family: 'metabook'; font-size: 2.5em; }
.jumbotron p {font-size: 2em;}

.modal-dialog { margin: 110px 10px 20px; }
.modal-footer {border: 0px;}

.no-touch .vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}

/*-- My stuff --*/
.panel-1 {
 background: transparent;
}

.panel-1-background {
	z-index: 2 !important;
}


	.panel-1 .drop {
		z-index: 99 !important;
	}


.panel-2-background {
	z-index: 1 !important;
	margin-top: -150px;
}


.wave-mask {
	z-index: 3 !important;
	margin-top: -150px;
}


.drop { 
	position: relative;
	height: 370px;
    width: 265px;
    padding-top: 95px;
    	
    padding-bottom: 10px;
    margin-top: 0px;
    background: url('../img/water-drop.png') no-repeat top center; 
    background-size: 263px 370px;
    display: block;
}

/*
.touch .panel-1 .drop {
	margin-top: -20%;
}
*/

.drop .scroll {
	position: absolute;
	bottom: -40px;
	left: 50%;
	margin-left: -12px;
}


@media (min-width: 768px) {
	.drop {
		width: 316px;
		height: 445px;
    	background-size: 316px 445px;
    	padding-top: 125px;
	}
}

.drop h2 { font-family: 'casino_handregular'; color: #ffde00; font-size: 2em; margin-top: 12px; }
.drop p { color: #014172; font-size: 1.2em; padding: 0px 20px; }

/*
.scroll { 
	margin-top: 40px; 
		
}

@media (min-width: 768px) {
	.scroll {
		margin-top: 90px;
	}
	
	HTML[lang=fr] .scroll { 
		margin-top: 138px; 
	}
}
*/


.waves { position: absolute; top: 0px; left: 0px; right: 0; bottom: 0; z-index: -1; }
.waves-desktop { position: absolute; top: 0px; left: 0px; right: 0; bottom: 0; z-index: -1; display: none; }

.jumbotron.tracks { padding-top: 10px; }
.tracks h1 {margin-bottom: 10px;}

.touch .jumbotron.tracks { padding-top: 100px; }



.yellow {
background: rgb(251,213,3); /* Old browsers */
background: -moz-linear-gradient(left, rgba(251,213,3,1) 0%, rgba(253,229,4,1) 50%, rgba(251,213,3,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(251,213,3,1)), color-stop(50%,rgba(253,229,4,1)), color-stop(100%,rgba(251,213,3,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(251,213,3,1) 0%,rgba(253,229,4,1) 50%,rgba(251,213,3,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(251,213,3,1) 0%,rgba(253,229,4,1) 50%,rgba(251,213,3,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(251,213,3,1) 0%,rgba(253,229,4,1) 50%,rgba(251,213,3,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(251,213,3,1) 0%,rgba(253,229,4,1) 50%,rgba(251,213,3,1) 100%); /* W3C */


    border-radius: 8px;
    padding: 10px 30px;
    margin-top: 30px;
    color: #004375;
    border: 2px solid #fff;
}
.yellow:active {
background: rgb(251,213,3); /* Old browsers */
background: -moz-linear-gradient(left, rgba(251,213,3,1) 0%, rgba(253,229,4,1) 50%, rgba(251,213,3,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(251,213,3,1)), color-stop(50%,rgba(253,229,4,1)), color-stop(100%,rgba(251,213,3,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(251,213,3,1) 0%,rgba(253,229,4,1) 50%,rgba(251,213,3,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(251,213,3,1) 0%,rgba(253,229,4,1) 50%,rgba(251,213,3,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(251,213,3,1) 0%,rgba(253,229,4,1) 50%,rgba(251,213,3,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(251,213,3,1) 0%,rgba(253,229,4,1) 50%,rgba(251,213,3,1) 100%); /* W3C */
    color: #004375;
}

.yellow .fa {
	font-size: 18px;
	position: relative;
	top: 2px;
	margin-left: 4px;
}

.yellow .fa-facebook, 
.yellow .fa-twitter {
	margin-right: 8px;
	color: #127bcc;
}
.yellow.fb { margin-top: 10px; }
.yellow.fb, .yellow.tw { width: 200px; }

.yellow.stopBtn { margin-top: 21px; }

.findme {margin-top: 60px; position: relative;}

.findme:after {
	content: "\f0da";
	font-family: FontAwesome;
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -9px;
}

.aboutLearnMore {
    margin-bottom: 30px;
}

@media (max-width: 768px) {
	
	HTML[lang=fr] .findme SPAN {
		display: block;
	}
	
	HTML[lang=fr] .findme:after {
		content: "\f0da";
		font-family: FontAwesome;
		position: absolute;
		right: 10px;
		top: 50%;
		margin-top: -8px;
	}
}

.loading {margin-top: 100px; text-align: center; display: none; color: #ffd200;}

#select {
	position: relative;
	margin-bottom: 0;
	
}

#select-track {margin-top: 0px; padding-top: 20px;}

@media (max-width: 768px) {
	background-color: #00113d;
}

#select h2 {
    color: #fff;
    font-size: 1.5em;
    margin-bottom: 20px;
}

.track {
    font-family: 'casino_handregular';
    color: #fff;
    font-size: 3em;
    width: 240px;
    	width: 100%;
    display: block;
    white-space: normal;
    line-height: .9em;
    text-align: center;
    padding: 30px 6px;
    border-bottom: 1px solid #979b2d;
    margin: 0 auto;
    border-radius: 0px;
    
    
}
.track:hover { color: #fff; }

@media (min-width: 992px) {
	.panel-2 H1 {
		margin-top: 0;
	}
	
	.panel-2 .container .row.last .track {
		border: 0;
	}
	
	.panel-2 .row > DIV:first-child {
		border-right: 1px solid #979b2d;
	}
}

#river {background: url('../img/btn-river.png') no-repeat top center; background-size: contain;}
#stream {background: url('../img/btn-stream.png') no-repeat top center; background-size: contain;}
#lake {background: url('../img/btn-lake.png') no-repeat top center; background-size: contain;}
#falls {background: url('../img/btn-falls.png') no-repeat top center; background-size: contain;}

.theName {
	text-shadow: 1px 1px .5px #000000;
	background: url(../img/track-btn.png) no-repeat right center;
	background-size: 35px 35px;
	min-height: 35px;
	display: inline-block;
	padding-right: 50px;
}

@media (min-width: 992px) {
	.theName {
		display: block;
	}
}

.accumulated { 
    width: 265px;
    height: 375px;
    padding-top: 104px;
    padding-bottom: 10px; 
    background: url('../img/water-drop2.png') no-repeat top center; 
    background-size: 263px 370px;
    position: relative;
    z-index: -1;
    z-index: 99;
    margin-top: 10px;
    /*iphone 5 and iphone 6 landscape*/
    overflow-y: hidden;
    overflow-x: hidden;
}
.jumbotron p.theTotalTime { font-family: 'casino_handregular'; color: #ffde00; font-size: 3em; margin-top: 90px; position: relative;}

@keyframes animatedBackground {
	from { background-position: -165px 155px; }
/*	to { background-position: -300px -220px; } moved inline for dynamic input*/ 
}
@-webkit-keyframes animatedBackground {
    from { background-position: -165px 155px;}
/*	to { background-position: -300px -220px; } moved inline for dynamic input*/
}
.tear {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    width: 250px;
    height: 250px;
    border: none;
    -webkit-border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
    border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
    font: normal 100%/normal Arial, Helvetica, sans-serif;
    color: rgba(0,0,0,1);
    -o-text-overflow: clip;
    text-overflow: clip;
    -webkit-transform: rotateZ(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotateZ(-45deg);
    top: 103px;
    position: absolute;
    left: 8px;
    background-image: url('../img/waves2.png');
	background-position: -165px 155px;
	background-repeat: no-repeat;
}
.tear.inView {
    -webkit-animation: animatedBackground 1s linear; 
	animation: animatedBackground 1s linear;
    -webkit-animation-iteration-count: 1;  /* Chrome, Safari, Opera */
    -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.lte9 .tear.inview {
    
}

#solopage {display: none;}

#solopage .jumbotron {
/*	padding-top: 0;*/
    padding-top: 0px;
    padding-bottom: 60px;
}
.back-arrow {display: none;}

.drop-location { 
    width: 265px;
    padding-top: 105px;
    padding-bottom: 40px;
    /*margin-top: -50%; */
    
    background: url('../img/water-drop3.png') no-repeat top center; 
    background-size: 263px 370px;
    position: relative;
    	
    	padding-top: 90px;
    	width: 280px;
		background-size: 280px 394px;
		padding-bottom: 70px;
		height: 394px;
		
}
.drop-location h1 { font-family: 'casino_handregular'; color: #fff; font-size: 2.5em; margin-top: 20px; padding: 0px 35px;}
.drop-location h2 { font-family: 'metabook'; color: #ffde00; font-size: 1.5em; margin-top: 12px; margin-bottom: 20px; }
.drop-location p { color: #fff; font-size: 1.2em; padding: 0px 15px; margin-bottom: 10px;  }
.drop-location p.count { font-family: 'casino_handregular'; color: #ffde00; font-size: 3em; position: absolute; bottom: 20px; left: 0; width: 100%; text-align: center; /*margin-top: 115px;*/ }


.back-arrow { position: absolute; top: 0px; left: 3%; }

/*.bg {position: absolute; top: 0px; left: 0px; z-index: -1; height: 100%;}*/
.bg {
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 320px;

    /* Set up proportionate scaling */
    width: 100%;
    height: auto;

    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

#trackName {margin-top: 40px; height: 80px;}

.stop {display: none;}
.drop-location .stop h1 {margin-top: 35px; font-size: 3.5em; }
.stop h2 {margin-bottom: 0px; margin-top: 25px;}
.stop p {font-size: 1.5em;}
.stop p span {color: #ffde00;}
.jumbotron .stop p.theTotalTime {margin-top: 0px;font-family: 'metabold';color: #fff;}

.cycle-slideshow {z-index: 1 !important;}

footer {
/*    height: 143px;*/
    padding: 15px;
    background: #0061aa;
    color: #fff;
    z-index: 1 !important;
    
}

footer .container {
	position: relative;
}

.ftr-wave { margin-bottom: -1px; }
footer a, footer a:hover, footer a:visited {color: #fff;}



footer .ftr-social {width: 100%; text-align: center;}
footer p { text-align: center; font-size: 1.05em; margin-top: 12px; padding: 0px;}
footer .fa-inverse {color: #0061aa; top: 1px;}

.fb-ftr, .tw-ftr {display: inline-block;}

@media (min-width: 768px) {
/*    body {overflow-y: hidden;}*/
    .navbar-brand { margin-left: 4px !important; margin-top: 10px; }
    .navbar-default .navbar-toggle, .navbar-default .navbar-toggle-overlay { margin-top: 25px; }
    .nav-overlay {position: fixed;}
/*    .jumbotron {padding-top: 0px !important;}*/
    #solopage .jumbotron { padding-top: 80px; padding-bottom: 0px;}
    .waves, .ftr-wave {display: none;}
    .waves-desktop {display: block;}
    .modal-dialog { margin: 110px auto 20px; }
    .sticky {position: absolute; bottom: 0px;}
    .panel-1 {margin-top: 0px;margin-bottom: 0px; background: #b1d2ed;}
    .drop {margin-top: -200px; top: 50%; position: relative;}
    .navbar-fixed-bottom { display: none; background: transparent; }
    .modal-body { padding: 15px 20px; }
    .how-it-works h1, .about h1 { text-align: left; }
    .col-md-3 { padding: 0px; }
    .col-md-3 p { font-size: 1.4em; }
    .bordered { padding: 30px 30px; }
    .about p { padding: 10px 0px; font-size: 1.5em; }
    
    .yellow.fb, .yellow.tw { width: auto; margin-top: 30px; }
    .yellow.tw { margin-right: 5px; }
    
    footer {
	    background: none;
	    height: auto;
	    padding: 20px;
    }
/*    footer .ftr-social {width: 100%; text-align: center;}*/
    footer .ftr-social {width: auto; position: absolute; top: 0; right: 0;}
    
    footer p { 
	    text-align: center; 
	    font-size: 1.05em;
	     margin-top: 12px; 
	     padding: 0px 80px 0px 80px;
	     
	}
}
@media (min-width: 768px) and (orientation:landscape) {
    .drop {margin-top: 0px; top: 0%; position: relative; }
    .panel-1 { height: 680px; }
}
@media (min-width: 768px) and (orientation:portrait) {
    .drop {margin-top: 0px; top: 0%; position: relative;}
}
@media (min-width: 992px) {
    .rope1, .rope2 {top:-145px;}
}







.touch .panel-2 {
	padding-top: 130px !important;
	padding-bottom: 60px;
}

#total {
	background: #00123d;
	padding-bottom: 75px;
}

/*
@media (max-width: 767px) {
	.touch #total {
		background: #001c3b;
	}
}
*/

@-webkit-keyframes bounce {
  0%, 50%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }

  20%, 70% {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px); } }

@-moz-keyframes bounce {
  0%, 50%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }

  20%, 70% {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px); } }

@-ms-keyframes bounce {
  0%, 50%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }

  20%, 70% {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px); } }

@keyframes bounce {
  0%, 50%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }

  20%, 70% {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px); } }

.bounce {
	-webkit-animation: bounce 2s infinite;
	-moz-animation: bounce 2s infinite;
	-ms-animation: bounce 2s infinite;
	animation: bounce 2s infinite;
}




.no-touch #desktop_howItWorks {
	display: block !important;
}

.no-touch #mobile_howItWorks {
	display: none !important;
}


.touch #desktop_howItWorks {
	display: none !important;
}

.touch #mobile_howItWorks {
	display: block !important;
}