@font-face {
	font-family: 'Gotham-Medium';
	src:	url('../fonts/Gotham-Medium.eot?#iefix') format('embedded-opentype'),  
			url('../fonts/Gotham-Medium.otf') format('opentype'),
	    	url('../fonts/Gotham-Medium.woff') format('woff'), 
	    	url('../fonts/Gotham-Medium.ttf') format('truetype'), 
	    	url('../fonts/Gotham-Medium.svg#Gotham-Medium') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Gotham-Book';
	src:	url('../fonts/Gotham-Book.eot?#iefix') format('embedded-opentype'),  
			url('../fonts/Gotham-Book.otf') format('opentype'),
	    	url('../fonts/Gotham-Book.woff') format('woff'), 
	    	url('../fonts/Gotham-Book.ttf') format('truetype'), 
	    	url('../fonts/Gotham-Book.svg#Gotham-Medium') format('svg');
	font-weight: normal;
	font-style: normal;
}


body {
	font-family: 'Gotham-Medium', Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 1.7em;
	color: #fff;
	margin: 0;
	
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	 
	background: #565d8a;
	background: -moz-linear-gradient(left,  #565d8a 0%, #2d3355 100%);
	background: -webkit-linear-gradient(left,  #565d8a 0%,#2d3355 100%);
	background: linear-gradient(to right,  #565d8a 0%,#2d3355 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#565d8a', endColorstr='#2d3355',GradientType=1 );
	
}

h1 {
	color: #8bc3fd;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 48px;
	line-height: 1.1em;
	margin: 0.5em 0 1em;
}

svg { width: 100%; height: 100%; }

button,
a.button {
	display: inline-block;
	border: 0;
	background: #93b159;
	padding: 10px 30px;
	font-size: 25px;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	-webkit-border-radius: 	10px;
	border-radius: 			10px;
}



.taustahihna {
	width: 100%;
	height: 500px;
	/* background: rgba(255,255,0,0.2); */
	overflow: hidden;
}

.taustahihna .linja {
	width: 200%;
	height: 100%;
	background: transparent url('../images/linja.png') repeat-x left bottom;
	background-size: 50vw;
	animation: 			taustahihnaAnim ease 5s infinite;
	-webkit-animation: 	taustahihnaAnim ease 5s infinite;
	-moz-animation: 	taustahihnaAnim ease 5s infinite;
	-o-animation: 		taustahihnaAnim ease 5s infinite;
	-ms-animation: 		taustahihnaAnim ease 5s infinite;
}




.liukuhihna {
	width: 100%;
	height: 220px;
	background: #33374c;
}

.liukuhihna > div {
	width: 100%;
	height: 10%;
	background: #616787;
}
.liukuhihna > div.middle {
	background: #777d9d;
	height: 45%;
}
.liukuhihna > div.front { height: 15%; }







.pullot {
	width: 100%;
	height: 200px;
	-webkit-transition: transform 1s ease;
	-moz-transition: 	transform 1s ease;
	-ms-transition: 	transform 1s ease;
	-o-transition: 		transform 1s ease;
	transition: 		transform 1s ease;
}

.pullot .pullo {
	display: inline-block;
	width: 20%;
	height: 100%;
	position: relative;
	text-align: center;
	transform-origin: 			center 80%;
	-webkit-transform-origin: 	center 80%;
	-moz-transform-origin: 		center 80%;
	-o-transform-origin: 		center 80%;
	-ms-transform-origin: 		center 80%;
}

.pullot .pullo .runko {
	width: auto;
	height: 100%;
}

.pullot .pullo .korkki {
	position: absolute;
	left: 50%;
	bottom: 100%;
	width: auto;
	height: 13%;
	-moz-transform: 	translate(-50%, 0%);
	-webkit-transform: 	translate(-50%, 0%);
	-o-transform: 		translate(-50%, 0%);
	-ms-transform: 		translate(-50%, 0%);
	transform: 			translate(-50%, 0%);
	-webkit-transition: transform 2s ease, opacity 2s ease;
	-moz-transition: 	transform 2s ease, opacity 2s ease;
	-ms-transition: 	transform 2s ease, opacity 2s ease;
	-o-transition: 		transform 2s ease, opacity 2s ease;
	transition: 		transform 2s ease, opacity 2s ease;
}

.pullot #pullo1 .korkki { bottom: 75%; }
.pullot #pullo2 .korkki { bottom: 83%; }
.pullot #pullo3 .korkki { bottom: 78%;}
.pullot #pullo4 .korkki { bottom: 97%; }
.pullot #pullo5 .korkki { bottom: 70%; left: 49%; }
.pullot #pullo6 .korkki { bottom: 69%; left: 48%; }

.pullot .pullo.korkiton .korkki {
	-moz-transform: 	translate(-50%, -46vh);
	-webkit-transform: 	translate(-50%, -46vh);
	-o-transform: 		translate(-50%, -46vh);
	-ms-transform: 		translate(-50%, -46vh);
	transform: 			translate(-50%, -46vh);
	opacity: 0;
}






html,
.etusivu,
#visa,
.loppu {
	height: 100%;
}

.etusivu .kampanja-logo {
	position: absolute;
	z-index: 10;
	right: 5%;
	top: 5%;
	width: 12%;
	max-width: 192px;
	max-height: 300px;
}

.etusivu .content,
.loppu .content {
	width: 70%;
	max-width: 800px;
	margin: 0 auto;
	height: auto;
	text-align: center;
}

.loppu .content {
	padding: 10% 20% 0 0;
}

.etusivu .content .logo {
	width: 70%;
	max-width: 727px;
	max-height: 330px;
	margin: 80px 0 30px;
}

.etusivu .content p,
.loppu .content p {
	font-size: 26px;
	line-height: 1.1em;
	margin: 0 0 20px;
}

.etusivu .bg,
.loppu .bg {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.loppu .bg { overflow: hidden; }

.etusivu .bg .taustahihna,
.loppu .bg .taustahihna {
	position: absolute;
	z-index: 1;
	bottom: 15%;
	height: 40vh;
}

.etusivu .bg .hihna,
.loppu .bg .hihna {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40vh;
	overflow: hidden;
}

.loppu .bg .hihna {
	overflow: visible;
}

.etusivu .bg .hihna .liukuhihna,
.loppu .bg .hihna .liukuhihna {
	position: absolute;
	z-index: 1;
	left: 0;
	bottom: -10%;
	height: 50%;
}

.loppu .bg .hihna .liukuhihna {
	bottom: 10%;
}

.etusivu .bg .hihna .pullot {
	position: absolute;
	z-index: 2;
	top: 10%;
	left: 0;
	width: 107vw;
	height: 70%;
	white-space: nowrap;
}
.etusivu .bg .hihna .pullot.clone {
	left: 107vw;
}

.etusivu .bg .hihna .pullot.move {
	animation: 			etusivuPulloAnim ease 10s infinite;
	-webkit-animation: 	etusivuPulloAnim ease 10s infinite;
	-moz-animation: 	etusivuPulloAnim ease 10s infinite;
	-o-animation: 		etusivuPulloAnim ease 10s infinite;
	-ms-animation: 		etusivuPulloAnim ease 10s infinite;
}

.etusivu .bg .hihna .pullot .pullo {
	width: 17vw;	
}

.etusivu .bg .hihna .pullot.move .pullo {
	animation: 			pulloShakeAnim ease 2.5s infinite;
	-webkit-animation: 	pulloShakeAnim ease 2.5s infinite;
	-moz-animation: 	pulloShakeAnim ease 2.5s infinite;
	-o-animation: 		pulloShakeAnim ease 2.5s infinite;
	-ms-animation: 		pulloShakeAnim ease 2.5s infinite;	
}


.loppu .content .palaute {
	display: none;
}

.loppu .content .palaute.nayta {
	display: block;
}

.loppu .bg .hihna .pokaali {
	position: absolute;
	z-index: 3;
	right: 10%;
	bottom: 38%;
	width: 25%;
	max-width: 465px;
	max-height: 676px;
	-webkit-transition: transform 2s ease;
	-moz-transition: 	transform 2s ease;
	-ms-transition: 	transform 2s ease;
	-o-transition: 		transform 2s ease;
	transition: 		transform 2s ease;
}

.loppu .bg .hihna .pokaali.out {
	-moz-transform: 	translateX(200%);
	-webkit-transform: 	translateX(200%);
	-o-transform: 		translateX(200%);
	-ms-transform: 		translateX(200%);
	transform: 			translateX(200%);
}

.loppu .bg .hihna .firmat {
	position: absolute;
	z-index: 4;
	bottom: 40%;
	left: 15%;
	width: 50%;
}

.loppu .bg .hihna .firmat a {
	color: #fff;
	text-decoration: none;
}

.loppu .bg .hihna .firmat > div {
	float: left;
	width: 40%;
	margin: 0 5%;
	text-align: center;
	white-space: nowrap;
}

#visa #pisteet {
	position: fixed;
	z-index: 10;
	right: 1%;
	top: 1%;
	width: auto;
	height: auto;
	background: #545a79;
	border: 4px solid #9da0ad;
	padding: 0 50px;
	font-size: 32px;
	line-height: 1.5em;
	-webkit-border-radius: 	10px;
	border-radius: 			10px;
}

#visa #tyyppi {
	position: fixed;
	z-index: 10;
	bottom: 0%;
	right: 2%;
	width: 30%;
	height: auto;
	pointer-events: none;
	-webkit-transition: transform 1s 1s ease;
	-moz-transition: 	transform 1s 1s ease;
	-ms-transition: 	transform 1s 1s ease;
	-o-transition: 		transform 1s 1s ease;
	transition: 		transform 1s 1s ease;
	-moz-transform: 	translate(150%, 20%) rotate(20deg);
	-webkit-transform: 	translate(150%, 20%) rotate(20deg);
	-o-transform: 		translate(150%, 20%) rotate(20deg);
	-ms-transform: 		translate(150%, 20%) rotate(20deg);
	transform: 			translate(150%, 20%) rotate(20deg);
}

#visa.start #tyyppi { 
	-moz-transform: 	none;
	-webkit-transform: 	none;
	-o-transform: 		none;
	-ms-transform: 		none;
	transform: 			none;
}

#visa #tyyppi svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 595px;
	max-height: 811px;
	margin: 0 auto -8%;
}

#visa #tyyppi svg #head {
	animation: 			headAnim ease 5s infinite;
	-webkit-animation: 	headAnim ease 5s infinite;
	-moz-animation: 	headAnim ease 5s infinite;
	-o-animation: 		headAnim ease 5s infinite;
	-ms-animation: 		headAnim ease 5s infinite;
	transform-origin: 			334px 444px;
	-webkit-transform-origin: 	334px 444px;
	-moz-transform-origin: 		334px 444px;
	-o-transform-origin: 		334px 444px;
	-ms-transform-origin: 		334px 444px;
}


#visa #tyyppi svg #head #expression #default,
#visa #tyyppi.correct svg #head #expression #correct,
#visa #tyyppi.incorrect svg #head #expression #incorrect { opacity: 1; }

#visa #tyyppi svg #head #expression #correct,
#visa #tyyppi svg #head #expression #incorrect,
#visa #tyyppi.correct svg #head #expression #incorrect,
#visa #tyyppi.correct svg #head #expression #default,
#visa #tyyppi.incorrect svg #head #expression #correct,
#visa #tyyppi.incorrect svg #head #expression #default { opacity: 0; }

#visa #tyyppi.incorrect svg #head #expression #incorrect #drop {
	animation: 			sweatAnim ease 2s;
	-webkit-animation: 	sweatAnim ease 2s;
	-moz-animation: 	sweatAnim ease 2s;
	-o-animation: 		sweatAnim ease 2s;
	-ms-animation: 		sweatAnim ease 2s;
	transform-origin: 			474px 203px;
	-webkit-transform-origin: 	474px 203px;
	-moz-transform-origin: 		474px 203px;
	-o-transform-origin: 		474px 203px;
	-ms-transform-origin: 		474px 203px;
	opacity: 0;
}

#visa #tyyppi svg #head #expression #default #eyes {
	animation: 			blinkAnim linear 5s infinite;
	-webkit-animation: 	blinkAnim linear 5s infinite;
	-moz-animation: 	blinkAnim linear 5s infinite;
	-o-animation: 		blinkAnim linear 5s infinite;
	-ms-animation: 		blinkAnim linear 5s infinite;
}
#visa #tyyppi svg #head #expression #default #blink {
	animation: 			blinkReverseAnim linear 5s infinite;
	-webkit-animation: 	blinkReverseAnim linear 5s infinite;
	-moz-animation: 	blinkReverseAnim linear 5s infinite;
	-o-animation: 		blinkReverseAnim linear 5s infinite;
	-ms-animation: 		blinkReverseAnim linear 5s infinite;
}


#visa .linjasto,
#visa .kyssari {
	width: 100%;
	height: 50%;
	position: relative;
	overflow: hidden;
}

#visa .kyssari { width: 70%; }

#visa .kyssari .widthLimit {
	width: 100%;
	height: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

#visa .linjasto .taustahihna {
	position: absolute;
	bottom: 5%;
	left: 0;
	width: 100%;
	height: 70%;
}

#visa .linjasto .liukuhihna {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 30%;
}

#visa .linjasto .kone {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 66%;
	height: auto;
}
#visa .linjasto .kone img {
	width: 100%;
	height: auto;
}

#visa #hana {
	position: absolute;
	z-index: 4;
	bottom: 100%;
	left: 33%;
	width: 8%;
	height: auto;
	-webkit-transition: bottom 0.5s ease;
	-moz-transition: 	bottom 0.5s ease;
	-ms-transition: 	bottom 0.5s ease;
	-o-transition: 		bottom 0.5s ease;
	transition: 		bottom 0.5s ease;
}
#visa.start #hana { bottom: 75%; }
#visa #hana.open { bottom: 65%; }

#visa #hana #rulla {
	transform-origin: 			118px 275px;
	-webkit-transform-origin: 	118px 275px;
	-moz-transform-origin: 		118px 275px;
	-o-transform-origin: 		118px 275px;
	-ms-transform-origin: 		118px 275px;
	-webkit-transition: transform 1s ease;
	-moz-transition: 	transform 1s ease;
	-ms-transition: 	transform 1s ease;
	-o-transition: 		transform 1s ease;
	transition: 		transform 1s ease;
}

#visa #hana.open #rulla {
	animation: 			rullaAnim ease 1.5s 0.4s;
	-webkit-animation: 	rullaAnim ease 1.5s 0.4s;
	-moz-animation: 	rullaAnim ease 1.5s 0.4s;
	-o-animation: 		rullaAnim ease 1.5s 0.4s;
	-ms-animation: 		rullaAnim ease 1.5s 0.4s;
}

#visa #hana svg {
	position: relative;
	z-index: 2;
}

#visa #hana #neste {
	position: absolute;
	z-index: 1;
	top: 30%;
	left: 25%;
	bottom: 10%;
	width: 0;
	background: rgba(255,0,0,0.7);
	-webkit-border-radius: 	5px 10px 5px 20px;
	border-radius: 			5px 10px 5px 20px;
	-moz-transform: 	translateX(-50%);
	-webkit-transform: 	translateX(-50%);
	-o-transform: 		translateX(-50%);
	-ms-transform: 		translateX(-50%);
	transform: 			translateX(-50%);
}

#visa #hana.open #neste {
	animation: 			nesteAnim ease 1.5s 0.4s;
	-webkit-animation: 	nesteAnim ease 1.5s 0.4s;
	-moz-animation: 	nesteAnim ease 1.5s 0.4s;
	-o-animation: 		nesteAnim ease 1.5s 0.4s;
	-ms-animation: 		nesteAnim ease 1.5s 0.4s;
}

#visa #robottikasi {
	position: absolute;
	z-index: 3;
	bottom: 50%;
	left: 10.7%;
	width: 8%;
	height: auto;
	-webkit-transition: transform 2s ease, left 1s ease, bottom 2s ease;
	-moz-transition: 	transform 2s ease, left 1s ease, bottom 2s ease;
	-ms-transition: 	transform 2s ease, left 1s ease, bottom 2s ease;
	-o-transition: 		transform 2s ease, left 1s ease, bottom 2s ease;
	transition: 		transform 2s ease, left 1s ease, bottom 2s ease;
	-moz-transform: 	translateY(-10vh);
	-webkit-transform: 	translateY(-10vh);
	-o-transform: 		translateY(-10vh);
	-ms-transform: 		translateY(-10vh);
	transform: 			translateY(-10vh);
}

#visa #robottikasi.up { 
	-moz-transform: 	translateY(-50vh);
	-webkit-transform: 	translateY(-50vh);
	-o-transform: 		translateY(-50vh);
	-ms-transform: 		translateY(-50vh);
	transform: 			translateY(-50vh);
}

#visa #robottikasi #pihti-vasen,
#visa #robottikasi #pihti-oikea {
	transform-origin: 			80px 489px;
	-webkit-transform-origin: 	80px 489px;
	-moz-transform-origin: 		80px 489px;
	-o-transform-origin: 		80px 489px;
	-ms-transform-origin: 		80px 489px;
	-webkit-transition: transform 0.4s ease;
	-moz-transition: 	transform 0.4s ease;
	-ms-transition: 	transform 0.4s ease;
	-o-transition: 		transform 0.4s ease;
	transition: 		transform 0.4s ease;
}

#visa #robottikasi.open #pihti-vasen {
	-moz-transform: 	rotate(20deg);
	-webkit-transform: 	rotate(20deg);
	-o-transform: 		rotate(20deg);
	-ms-transform: 		rotate(20deg);
	transform: 			rotate(20deg);
}
#visa #robottikasi.open #pihti-oikea {
	-moz-transform: 	rotate(-20deg);
	-webkit-transform: 	rotate(-20deg);
	-o-transform: 		rotate(-20deg);
	-ms-transform: 		rotate(-20deg);
	transform: 			rotate(-20deg);
}

#visa #robottikasi.korkita {
	-moz-transform: 	translateY(0);
	-webkit-transform: 	translateY(0);
	-o-transform: 		translateY(0);
	-ms-transform: 		translateY(0);
	transform: 			translateY(0);
}

#visa .linjasto.step1 #robottikasi { bottom: 55%; }
#visa .linjasto.step2 #robottikasi { bottom: 59%; }
#visa .linjasto.step3 #robottikasi { bottom: 56%; }
#visa .linjasto.step4 #robottikasi { bottom: 65%; }
#visa .linjasto.step5 #robottikasi { bottom: 53%; }

#visa #robottikasi.grap {
	-moz-transform: 	translateY(0);
	-webkit-transform: 	translateY(0);
	-o-transform: 		translateY(0);
	-ms-transform: 		translateY(0);
	transform: 			translateY(0);
}
#visa .linjasto.step1 #robottikasi.grap { bottom: 50%; }
#visa .linjasto.step2 #robottikasi.grap { bottom: 54%; }
#visa .linjasto.step3 #robottikasi.grap { bottom: 52%; }
#visa .linjasto.step4 #robottikasi.grap { bottom: 60%; }
#visa .linjasto.step5 #robottikasi.grap { bottom: 53%; left: 12%; }

#visa #robottikasi.grap.up { 
	-moz-transform: 	translateY(-50vh);
	-webkit-transform: 	translateY(-50vh);
	-o-transform: 		translateY(-50vh);
	-ms-transform: 		translateY(-50vh);
	transform: 			translateY(-50vh);
}


#visa .linjasto .pullot {
	position: absolute;
	z-index: 5;
	left: 50%;
	bottom: 20%;
	width: 100vw;
	height: 45%;
	white-space: nowrap;
	-webkit-transition: left 1s ease, transform 1s ease;
	-moz-transition: 	left 1s ease, transform 1s ease;
	-ms-transition: 	left 1s ease, transform 1s ease;
	-o-transition: 		left 1s ease, transform 1s ease;
	transition: 		left 1s ease, transform 1s ease;
}
#visa.start .linjasto .pullot { left: 25%; }

#visa .linjasto.step1 .pullot {
	-moz-transform: 	translateX(-20%);
	-webkit-transform: 	translateX(-20%);
	-o-transform: 		translateX(-20%);
	-ms-transform: 		translateX(-20%);
	transform: 			translateX(-20%);
}

#visa .linjasto.step2 .pullot {
	-moz-transform: 	translateX(-40%);
	-webkit-transform: 	translateX(-40%);
	-o-transform: 		translateX(-40%);
	-ms-transform: 		translateX(-40%);
	transform: 			translateX(-40%);
}

#visa .linjasto.step3 .pullot {
	-moz-transform: 	translateX(-60%);
	-webkit-transform: 	translateX(-60%);
	-o-transform: 		translateX(-60%);
	-ms-transform: 		translateX(-60%);
	transform: 			translateX(-60%);
}

#visa .linjasto.step4 .pullot {
	-moz-transform: 	translateX(-80%);
	-webkit-transform: 	translateX(-80%);
	-o-transform: 		translateX(-80%);
	-ms-transform: 		translateX(-80%);
	transform: 			translateX(-80%);
}

#visa .linjasto.step5 .pullot {
	-moz-transform: 	translateX(-100%);
	-webkit-transform: 	translateX(-100%);
	-o-transform: 		translateX(-100%);
	-ms-transform: 		translateX(-100%);
	transform: 			translateX(-100%);
}

#visa .linjasto .pullot .pullo {
	width: 20vw;
	-webkit-transition: transform 0.5s ease-in;
	-moz-transition: 	transform 0.5s ease-in;
	-ms-transition: 	transform 0.5s ease-in;
	-o-transition: 		transform 0.5s ease-in;
	transition: 		transform 0.5s ease-in;
}

/*
#visa .linjasto .pullot .pullo:after {
	content: '';
	position: absolute;
	top: -100%;
	left: 50%;
	width: 2px;
	bottom: 0;
	margin-left: -1px;
	background: #fff;
}
*/

#visa .linjasto .pullot .pullo.moving {
	animation: 			pulloShakeAnim ease 2s;
	-webkit-animation: 	pulloShakeAnim ease 2s;
	-moz-animation: 	pulloShakeAnim ease 2s;
	-o-animation: 		pulloShakeAnim ease 2s;
	-ms-animation: 		pulloShakeAnim ease 2s;	
}

#visa .linjasto .pullot .pullo.pickup {
	-moz-transform: 	translateY(-50vh);
	-webkit-transform: 	translateY(-50vh);
	-o-transform: 		translateY(-50vh);
	-ms-transform: 		translateY(-50vh);
	transform: 			translateY(-50vh);
	-webkit-transition: left 2s ease, transform 2s ease;
	-moz-transition: 	left 2s ease, transform 2s ease;
	-ms-transition: 	left 2s ease, transform 2s ease;
	-o-transition: 		left 2s ease, transform 2s ease;
	transition: 		left 2s ease, transform 2s ease;
}

#visa .linjasto .pullot .pullo.hidden { opacity: 0; }

#visa .kyssari .number {
	float: left;
	width: 15%;
	font-size: 70px;
	font-weight: bold;
	line-height: 1em;
	text-align: left;
	color: #c4bf9a;
	margin: 50px 0;
}

#visa .kyssari .number.highlight {
	animation: 			numberChangeAnim ease 1s;
	-webkit-animation: 	numberChangeAnim ease 1s;
	-moz-animation: 	numberChangeAnim ease 1s;
	-o-animation: 		numberChangeAnim ease 1s;
	-ms-animation: 		numberChangeAnim ease 1s;	
}


#visa .kyssari .indent {
	width: 85%;
	margin: 50px 0 50px 15%;
	position: relative;
}

#visa .kyssari .kysymys {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	-moz-transform: 	translateY(100%);
	-webkit-transform: 	translateY(100%);
	-o-transform: 		translateY(100%);
	-ms-transform: 		translateY(100%);
	transform: 			translateY(100%);
	-webkit-transition: transform 1s ease, opacity 1s ease;
	-moz-transition: 	transform 1s ease, opacity 1s ease;
	-ms-transition: 	transform 1s ease, opacity 1s ease;
	-o-transition: 		transform 1s ease, opacity 1s ease;
	transition: 		transform 1s ease, opacity 1s ease;
}

#visa .kyssari .kysymys.current {
	opacity: 1;
	pointer-events: auto;
	-moz-transform: 	translateY(0);
	-webkit-transform: 	translateY(0);
	-o-transform: 		translateY(0);
	-ms-transform: 		translateY(0);
	transform: 			translateY(0);
}

#visa .kyssari .kysymys.old {
	-moz-transform: 	translateY(-100%);
	-webkit-transform: 	translateY(-100%);
	-o-transform: 		translateY(-100%);
	-ms-transform: 		translateY(-100%);
	transform: 			translateY(-100%);
}

#visa .kyssari .question {
	font-size: 28px;
	line-height: 1.3em;
}

#visa .kyssari .answers {
	margin: 20px 0;
}

#visa .kyssari .answers .answer {
	width: 80%;
	background: #c4bf9a;
	-webkit-border-radius: 	50px;
	border-radius: 			50px;
	padding: 5px 2% 5px 9%;
	margin: 10px 0;
	position: relative;
	font-size: 25px;
	font-weight: bold;
	line-height: 1.3em;
	border: 5px solid rgba(255,255,255,0);
	-webkit-transition: background 0.4s ease;
	-moz-transition: 	background 0.4s ease;
	-ms-transition: 	background 0.4s ease;
	-o-transition: 		background 0.4s ease;
	transition: 		background 0.4s ease;
	cursor: pointer;
}

#visa .kyssari .answers .answer:hover {
	border-color: rgba(255,255,255,0.5);
}
#visa .kyssari .answers.disabled .answer:hover {
	border-color: rgba(255,255,255,0);
	cursor: auto;
}
#visa .kyssari .answers .answer.selected {
	border-color: #fff !important;
}

#visa .kyssari .answers.disabled .answer {
	background: #c3683f;
}

#visa .kyssari .answers.disabled .answer.correct {
	background: #8eab60;
}

#visa .kyssari .answers .answer span {
	position: absolute;
	display: block;
	top: 50%;
	left: 3%;
	width: 7%;
	-moz-transform: 	translateY(-50%);
	-webkit-transform: 	translateY(-50%);
	-o-transform: 		translateY(-50%);
	-ms-transform: 		translateY(-50%);
	transform: 			translateY(-50%);
}

#visa .kyssari #respond {
	position: absolute;
	z-index: 11;
	top: 70px;
	left: 20%;
	width: 70%;
	height: auto;
	border: 5px solid #fff;
	background: #2d3355;
	-webkit-border-radius: 	30px;
	border-radius: 			30px;
	-webkit-box-shadow: 0 0 40px #000;
	box-shadow: 		0 0 40px #000;
	font-size: 18px;
	line-height: 1.2em;
	-webkit-transition: transform 0.4s ease, opacity 0.4s ease;
	-moz-transition: 	transform 0.4s ease, opacity 0.4s ease;
	-ms-transition: 	transform 0.4s ease, opacity 0.4s ease;
	-o-transition: 		transform 0.4s ease, opacity 0.4s ease;
	transition: 		transform 0.4s ease, opacity 0.4s ease;
	-moz-transform: 	translateY(-5%);
	-webkit-transform: 	translateY(-5%);
	-o-transform: 		translateY(-5%);
	-ms-transform: 		translateY(-5%);
	transform: 			translateY(-5%);
	opacity: 0;
	pointer-events: none;
}

#visa .kyssari #respond.nayta {
	opacity: 1;
	pointer-events: auto;
	-moz-transform: 	none;
	-webkit-transform: 	none;
	-o-transform: 		none;
	-ms-transform: 		none;
	transform: 			none;	
}

#visa .kyssari #respond .padding {
	padding: 30px;
	text-align: center;
}
#visa .kyssari #respond .padding .text {
	margin: 0 0 20px;	
}