/* Height based */

@media all and (max-height: 1099px){
	
	#visa .linjasto { height: 45%; }
	#visa .kyssari { height: 55%; }
	
}

@media all and (max-height: 999px){

	.etusivu .bg .hihna, 
	.loppu .bg .hihna {
		height: 35vh;
	}
	.etusivu .bg .taustahihna { bottom: 12%; }
	.loppu .bg .taustahihna { bottom: 16%; }


	#visa .linjasto { height: 40%; }
	#visa .kyssari { height: 60%; }
	
	#visa .linjasto .taustahihna {
		height: 60%;
		bottom: 30%;
	}
	.taustahihna .linja {
		background-size: 25vw;
	}
	
	.loppu .content { padding-top: 8%; }
	
	.etusivu .content .logo { margin: 50px 0 20px; }
		
}

@media all and (max-height: 899px){
	
	.etusivu .bg .hihna, 
	.loppu .bg .hihna {
		height: 30vh;
	}
	.etusivu .bg .taustahihna { bottom: 10%; }
	.loppu .bg .taustahihna { bottom: 14%; }
	
	#visa .linjasto { height: 40%; }
	#visa .kyssari { height: 60%; }
	
	#visa .linjasto .taustahihna { bottom: 20%; }
	
	.loppu .content { padding-top: 6%; }
	
	.etusivu .content .logo { margin: 50px 0 15px; }
	
}

@media all and (max-height: 649px) {
	
	button,
	a.button {
		padding: 10px 20px;
		font-size: 18px;
	}
	
	#visa {
		height: auto;
	}
	
	#visa .linjasto	{ display: none; }
	#visa .kyssari { height: auto; }
	
	#visa .kyssari {
		width: 92%;
		height: 90vh !important;
		overflow-x: hidden;
		overflow-y: scroll;
		margin: 20px auto;
	}
	
	#visa .kyssari .widthLimit { 
		width: 70%;
		margin: 0;
		height: auto;
	}
	
	#visa .kyssari .kysymys {
		width: 100%;
		height: auto;
		-moz-transform: 	translateX(100%);
		-webkit-transform: 	translateX(100%);
		-o-transform: 		translateX(100%);
		-ms-transform: 		translateX(100%);
		transform: 			translateX(100%);
	}
	
	#visa .kyssari .kysymys.current {
		-moz-transform: 	translateX(0);
		-webkit-transform: 	translateX(0);
		-o-transform: 		translateX(0);
		-ms-transform: 		translateX(0);
		transform: 			translateX(0);
	}
	
	#visa .kyssari .kysymys.old {
		-moz-transform: 	translateX(-100%);
		-webkit-transform: 	translateX(-100%);
		-o-transform: 		translateX(-100%);
		-ms-transform: 		translateX(-100%);
		transform: 			translateX(-100%);
	}

	#visa #pisteet { z-index: 20; }
	
	.loppu .content { padding-top: 4%; }
	.etusivu .content .logo { margin: 70px 0 10px; }
	
	.loppu .bg {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		height: 70vw;
		max-height: 320px;
		overflow: hidden;
	}
	.loppu .bg .taustahihna { display: none; }
	
	.loppu .bg .hihna .pokaali {
		right: 2%;
	}
		
	@media all and (min-width: 1000px){
		
		.loppu .bg { 
			max-height: 720px;	
			margin-top: -400px;
		}
		
	}
	
	@media all and (max-width: 999px){
		
		.loppu .bg { 
			max-height: 500px;	
		}
		
	}

	
	@media all and (max-width: 799px){
		
		#visa .kyssari .number { text-align: left !important; font-size: 26px !important; }
		
	}

}


@media all and (max-width: 499px){
	
	.etusivu .content .logo { margin: 90px 0 10px; }
	.etusivu .kampanja-logo { width: 16%; }
		
	
}





/* Width based */

@media all and (max-width: 1499px){

	#visa #pisteet { font-size: 30px; }
	#visa .kyssari .number { font-size: 50px; text-align: center; }
	#visa .kyssari .question { font-size: 26px; }
	#visa .kyssari .answers .answer { font-size: 23px; }
	.etusivu .content p, .loppu .content p { font-size: 26px; }
	.lopetus .content p { font-size: 26px; }
		
	h1 { font-size: 38px; }
}

@media all and (max-width: 1299px){

	#visa #pisteet { font-size: 28px; }
	#visa .kyssari .number { font-size: 42px;}
	#visa .kyssari .question { font-size: 22px; }
	#visa .kyssari .answers .answer { font-size: 20px; }
	.etusivu .content p, .loppu .content p { font-size: 22px; }
	.lopetus .content p { font-size: 22px; }
	
	.loppu .content {
		padding: 5% 0 0;
	}
	
	h1 { font-size: 32px; }
	
}

@media all and (max-width: 999px){
		
	.loppu .bg .hihna .firmat {
		bottom: 10%;
		width: 80%;
		left: 10%;
	}
	
	.loppu .bg .hihna .pokaali {
		right: 50%;
		-moz-transform: 	translateX(50%);
		-webkit-transform: 	translateX(50%);
		-o-transform: 		translateX(50%);
		-ms-transform: 		translateX(50%);
		transform: 			translateX(50%);
	}
	
	.loppu .bg .hihna .pokaali.out {
		-moz-transform: 	translateX(400%);
		-webkit-transform: 	translateX(400%);
		-o-transform: 		translateX(400%);
		-ms-transform: 		translateX(400%);
		transform: 			translateX(400%);
	}
	
	h1 { font-size: 28px; }
	.etusivu .content p, .loppu .content p { font-size: 20px; }
	.lopetus .content p { font-size: 20px; }
	.loppu .bg .taustahihna { display: none; }
	
}


@media all and (max-width: 699px) {
	
	button,
	a.button {
		padding: 10px 20px;
		font-size: 18px;
	}
	
	#visa {
		height: auto;
	}
	
	#visa .linjasto	{ display: none; }
	#visa .kyssari { height: auto; }

	#visa .kyssari {
		width: 92%;
		height: 90vh !important;
		overflow-x: hidden;
		overflow-y: scroll;
		margin: 20px auto;
	}
	
	#visa .kyssari .widthLimit { 
		width: 100%;
		height: auto;
	}
	
	#visa .kyssari .kysymys {
		width: 100%;
		height: auto;
		-moz-transform: 	translateX(100%);
		-webkit-transform: 	translateX(100%);
		-o-transform: 		translateX(100%);
		-ms-transform: 		translateX(100%);
		transform: 			translateX(100%);
	}
	
	#visa .kyssari .kysymys.current {
		-moz-transform: 	translateX(0);
		-webkit-transform: 	translateX(0);
		-o-transform: 		translateX(0);
		-ms-transform: 		translateX(0);
		transform: 			translateX(0);
	}
	
	#visa .kyssari .kysymys.old {
		-moz-transform: 	translateX(-100%);
		-webkit-transform: 	translateX(-100%);
		-o-transform: 		translateX(-100%);
		-ms-transform: 		translateX(-100%);
		transform: 			translateX(-100%);
	}
	
	#visa #tyyppi {
		width: 50%;
		height: auto;
	}
	
	#visa #pisteet { font-size: 20px; padding: 0 15px; border-width: 2px; }
	#visa .kyssari .number { font-size: 32px;}
	#visa .kyssari .question { font-size: 16px; }
	#visa .kyssari .answers .answer { font-size: 14px; }
	.etusivu .content p, .loppu .content p { font-size: 16px; }
	.lopetus .content p { font-size: 16px; }
	#visa .kyssari #respond { 
		font-size: 14px;
		border: 3px solid #fff;
		-webkit-border-radius: 	20px;
		border-radius: 			20px;
		-webkit-box-shadow: 0 0 20px #000;
		box-shadow: 		0 0 20px #000;
	}
	
	.loppu .bg {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		height: 70vw;
		max-height: 320px;
	}
	
	.loppu .bg .hihna .firmat {
		font-size: 14px;
	}
}


@media all and (max-width: 499px){
	
	h1 { font-size: 20px; }
	.etusivu .content p, .loppu .content p { font-size: 14px; }
	.lopetus .content p { font-size: 14px; }
	
	button,
	a.button {
		padding: 5px 10px;
		font-size: 15px;
	}
	
	.loppu .bg .hihna {
		bottom: 15%;
	}
	
	.loppu .bg .hihna .firmat {
		font-size: 12px;
		line-height: 1.4em;
		bottom: -10%;
	}
	
	.loppu .bg .hihna .firmat > div {
		float: none;
		width: 100%;
		margin: 0;
	}
	
	
	
}



/* Orientation based */

@media screen and (orientation:portrait) {
	
	
	#visa .linjasto { height: 30%; }
	#visa .kyssari { height: 70%; }
	
	
	#visa .kyssari .number {
		float: none;
		width: 150px;
		margin: 20px 0 0 4%;
		text-align: left;
	}
	
	#visa .kyssari .indent {
		width: 92%;
		margin: 20px auto;
	}
	
	#visa .kyssari #respond {
		width: 80%;
		left: 10%;
	}
	
	
	.etusivu .bg .hihna .pullot {
		width: 157vw;
	}
	.etusivu .bg .hihna .pullot.clone {
		left: 157vw;
	}
	
	.etusivu .bg .hihna .pullot .pullo {
		width: 25vw;
	}
	
	.taustahihna .linja {
		background-size: 50vw;
	}
	
	
}

@media screen and (orientation:portrait) and (max-height: 599px) {

	#visa #tyyppi { width: 42%; }	
	
}

@media screen and (orientation:portrait) and (max-height: 499px) {

	#visa #tyyppi { display: none; }	
	
}

@media screen and (orientation:landscape) and (max-width: 699px) {

	#visa #tyyppi { display: none; }	
	
}