@font-face {
	  font-family: 'tu-extraicons';
	  src:
	    url('fonts_ttf.php') format('truetype'),
	    url('fonts_woff.php') format('woff'),
	    url('fonts_svg.php#tu-extraicons') format('svg');
	  font-weight: normal;
	  font-style: normal;
	}

	#tujausform { position: relative; }
	#tujausform, #tujausform table { }
	#tujaus_content, #tujaus_content table { }
	
	#tu_formwrapper {
		position: relative;
	}
	
	#tujaus_content {
		position: relative;
		min-height: 200px;
	}
	
	#tujausform hr {
		border: none;
		border-top: 1px solid rgba(0,0,0,0.05);
		height: 1px;
		padding: 0;
		margin: 0;
	}
	
    .tu_small {font-size: 70%;}		
	.tu_clear {clear:both;}
	.tu_otsikko { display: inline-block; width: 25%; min-width:60px; padding: 10px 0; box-sizing: border-box; vertical-align: top; }

	.tu_otsikko_tyyppi { padding: 0 0 20px 0; }
	
	.tu_otsikko_nbsp {
		display: none;
	}
	
	.tu_box { width:100%; position:relative; padding:4px 0px; box-sizing: border-box; }
	.tu_box2 { display: inline-block; width: 75%; min-width: 100px; box-sizing: border-box; vertical-align: top; position: relative; }
		
	.tu_nappi {
		display:block;
		text-align:center;
		cursor:pointer;
		margin:5px;
		font-weight: bold;
		padding: 10px 8px 10px 8px;
		background: gray;
		color: white;
		text-decoration: none;
		font-size: 1.2em;
	}
	
	.tu_seloste { padding: 10px;}
	
	#tu_autoluokat_hae {
		font-size: 1.5em;
	}
	
	.tu_jatkakiitos_tallenna {
		opacity: 0.5em;
	}
	
	.tu_tyyppirivi { margin-left: 10px; }
	.tu_tyyppirivi input {margin: 0; margin-right: 10px; cursor: pointer; }

	.tu_loader {
		position: absolute;
		width: 100%; 
		height: 100%;
		background: rgba(255,255,255,0.8);
		display: table-cell;
		text-align: center;
		box-sizing: border-box; 
		padding-top: 20px;
		display: none;
		z-index: 1;
	}

	.tu_loader:before {
	    font-family: "tu-extraicons" !important;
		content: "\E980";
		font-size: 40px;
		position: relative;
		display: inline-block;
		vertical-align: -50%;
		-webkit-animation:spin 1.5s linear infinite;
		-moz-animation:spin 1.5s linear infinite;
		animation:spin 1.5s linear infinite;
	}        
 
 	.tu_yhteenveto .tu_loader {
		background: transparent;
	}
    
	@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
	@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
	@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

/* 
//===================================================	
//	TOIMIPAIKAN VALINTA 
//===================================================	
*/
			
	.tu_toimipaikka_select, .tu_pvm_select { 
		cursor: pointer; 
		box-sizing: border-box; 
		background: #ededed; 
		padding: 10px 8px 10px 30px; 
		margin: 5px 0 5px 0; 
		white-space: nowrap;
		position: relative;
		overflow: hidden;
	}	
	
	.tu_toimipaikka_select:before {
	    font-family: "tu-extraicons" !important;
		content: "\e947";
		font-size: 16px;
		font-weight: normal;
		display: block;
		width: 16px;
		height: 16px;
		position: absolute;
		margin-left: -22px;
		margin-top: 2px;
	}
	
	.tu_pvm_select:before {
	    font-family: "tu-extraicons" !important;
		content: "\e94e";
		font-size: 16px;
		font-weight: normal;
		display: block;
		width: 16px;
		height: 16px;
		position: absolute;
		margin-left: -22px;
		margin-top: 2px;
	}
	
	.tu_pvm_select:after, .tu_toimipaikka_select:after, .tu_km_select_wrapper:after, .tu_autoryhma_select_wrapper:after, .tu_maksutapa_wrapper:after {
	    font-family: "tu-extraicons" !important;
		content: "\e903";
		font-size: 18px;
		font-weight: normal;
		display: block;
		width: 16px;
		position: absolute;
		margin-left: -22px;
		margin-top: 2px;
		right: 10px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		height:200px;
		line-height:200px;
		box-sizing: border-box;	
		pointer-events: none;
	}
	
	.tu_pvm_select, .tu_toimipaikka, .tu_toimipaikka_select, .tu_km_select_wrapper, .tu_kuponki_wrapper, .tu_nappi, .tu_autoryhma_select_wrapper, .tu_maksutapa_wrapper {
		border-radius: 6px;
		overflow: hidden;
	}
		
	.tu_toimipaikka_option { 
		background: white; 
		position:absolute; 
		z-index: 9999999; 
		width: 100%; 
		display: none; 
		margin: 3px; 

		line-height:normal; 
		overflow: auto; 
		border: 1px solid rgba(0,0,0,0.4); 
		box-shadow: 0px 0px 5px rgba(0,0,0,0.3); 
	}

	.tu_toimipaikka_etsi {
		display: block;
		padding: 5px 5px; 
		background: rgba(0,0,0,0.05);
		position: relative
	}

	.tu_toimipaikka_etsi input {
		padding: 5px 5px 5px 27px; border: 1px solid rgba(0,0,0,0.05);
		width: 100%;
		box-sizing: border-box;
		font-size: 1.0em;
		color: black;
		-webkit-appearance: none;
		-moz-appearance: none;
	}

	.tu_toimipaikka_etsi input::-webkit-input-placeholder { color: rgba(0,0,0,0.9); font-family: inherit; }
	.tu_toimipaikka_etsi input::-moz-placeholder { color: rgba(0,0,0,0.9); font-family: inherit; }
	
	.tu_toimipaikka_etsi:before {
	    font-family: "tu-extraicons" !important;
		content: "\e902";
		font-size: 16px;
		font-weight: normal;
		display: block;
		width: 16px;
		height: 16px;
		position: absolute;
		margin-left: 7px;
		margin-top: 9px;
		color: rgba(0,0,0,0.2);
	}	
	
	.tu_toimipaikka_option ul { 
		max-height: 300px;
		overflow: hidden; 
		overflow-y: scroll; 
		margin: 0;
		padding: 0; 
		list-style: none;
	}

	.tu_toimipaikka_option li { padding: 5px 5px; cursor:pointer; font-size: 12px; border-bottom: 1px solid rgba(0,0,0,0.05); }
	.tu_toimipaikka_option li:nth-child(odd) {}
	.tu_toimipaikka_option li:hover { background: rgba(0,0,0,0.05); }
	.tu_toimipaikka_option b { display:block; font-size: 14px; }

	.tu_pvm_option { 
		background: white; 
		position:absolute; 
		z-index:9999999; 
		width:500px;
		display: none;
		line-height: normal;
	}

	.tu_km_select, #tu_kuponki, #tu_autoryhma_select, .tu_maksutapa_wrapper select  { 
		width: 100%; 
		box-sizing: border-box; 
		padding: 10px 8px 10px; 
		position: relative; 
		-webkit-appearance: none;
		-moz-appearance: none;
		apperance: none;
    	border: none;
		font-size: inherit;
		background: transparent;
		border-radius: 0;
		margin: 1px 5px 1px 0; 
	}
	
	.tu_km_select_wrapper, .tu_kuponki_wrapper, .tu_autoryhma_select_wrapper, .tu_maksutapa_wrapper {
		position: relative; 
		box-sizing: border-box; 
		background: #ededed; 
		margin-top: 5px;
		white-space: nowrap; 		
	}

/* 
//===================================================	
// KALENTERI
//===================================================	
*/	
	.tu_kalenteri { width: 250px !important; margin: 8px 20px 8px 8px; border-collapse: collapse; border-spacing:0px;  border-radius:5px;}
	.tu_kalenteri tr:nth-child(2) td {font-size: 0.9em;}
	.tu_kalenteri tr td  {width: 14.2857142%; height:30px; text-align: center;padding: 0px;}
	.tu_kalenteri tr div  {height:30px; line-height: 30px; cursor: pointer; border-radius: 2px; border: 1px solid rgba(0,0,0,0.05); }
	.tu_kalenteri tr div:hover  { font-weight: bold; background: rgba(0,0,0,0.1); }
	
	.tu_kalenteri_otsikkoyla {height: 30px;}
	
	.tu_kalenteri_otsikko {width: 268px; padding-left: 6px; float: left; height: 35px; line-height: 35px; font-weight: bold;}
	.tu_kalenteri_otsikko2 {float: left; height: 35px; line-height: 35px; font-weight: bold; padding-left: 26px;}

	.tu_kalenteri_yla {height: 40px;line-height: 40px; background: rgba(0,0,0,0.05);  }
	.tu_eteen { display:block; float: right; width: 40px; height: 40px; cursor: pointer; position: relative;}
	.tu_taakse {display:block; float: left;  width: 40px; height: 40px; cursor: pointer; position: relative;}

	.tu_eteen:before, .tu_taakse:before {
		font-family: "tu-extraicons" !important; 
		content: "\ea1c"; 
		display: block;
		position: absolute;
		width: 40px;
		height: 40px;
		text-align: center;
		line-height: 40px;
	}
	
	.tu_taakse:before {
		transform: rotate(180deg);
	}

	.tu_kalenteri_div {
		float:left;
		padding:6px;
	}	

	.tu_kalenteri_vkl {width: 200px; height: 100px; font-size: 20px; padding: 10px;}

	.tu_aika_div {float:left; padding: 12px;}

	.tu_aika_div select {
		width: 65px; 
		height: 30px; 
		line-height: 30px; 
		font-weight: bold;
		font-size: 16px;
		-webkit-appearance: none; 
		-moz-appearance: none;
		appearance: none;
		box-sizing: border-box;
		padding: 10px; 
		line-height: normal;
		border: 1px solid rgba(0,0,0,0.4);
		height: auto;
		border-radius: 0;
		position: relative;
		color: inherit;
	}
	
	.tu_aika_wrapper {
		display: inline-block;
		position: relative;
	}	
	
	.tu_aika_wrapper:before {
	    font-family: "tu-extraicons" !important;
		content: "\e903";
		font-size: 10px;
		font-weight: normal;
		display: block;
		width: 16px;
		height: 16px;
		position: absolute;
		margin-left: -22px;
		margin-top: 2px;
		top: 16px;
		right: 5px;
		background: transparent;
		z-index: 2;
		pointer-events: none;
	}
	
	.tu_aika_text {
		display: inline-block;
		margin: 10px 0; 
		font-size: 12px;
		width: 150px;
	}
	

	.tu_kalenteri_ok {float: left; width: 120px;margin-left:12px;}
	
	.tu_pvm_selected, .tu_pvm_selected:hover {
		background: rgba(0,0,0,0.1);
	}
	
	.tu_esto {cursor: default; opacity: 0.5; border: none !important; }
	.tu_esto:hover {cursor: default !important; font-weight: normal;}
	
	.tu_copy {font-size: 8px; float: right; padding-right: 10px; }
	.tu_copy a { color: inherit;}

	.hintasis {margin: 0px 10px; padding: 0px; font-size: 90% !important;
	}        

/* 
//=========================================================================	
// AUTOLUOKAN VALINTA
//=========================================================================	
*/	

	#tu_autoryhma {
		margin: 0;
		padding: 0;
		display: inline-block;
	    background: #ededed;
	    border: 1px solid #ededed;
	    border-bottom: 0;
	    margin-bottom: -1px;
	}
	
	#tu_autoryhma li {
		margin: 0;
		padding: 20px;
		display: inline-block;
		cursor: pointer;
	}
	    
	.tu_autoryhma_valittu {
	    background: white;
	}
 	
 	
/* 
//=========================================================================	
// AUTOLISTA  
//=========================================================================	
*/	       
    .tu_autoluokka_lista {
	    margin:0px; 
	    padding: 0; 
	    list-style: none;
	    border: 1px solid #ededed;
	    border-bottom: none;
	    display: block;
	}
	
	.tu_autoluokka_lista > li {
		position: relative;
		min-height: 200px;
	}
	
    .tu_autoluokka_otsikko {
	    margin:0px;
	    padding: 0px;
	    list-style: none;
	    font-size: 1.4em;
	}
   
	.vapaa {
		opacity: 0.8;
	}

	.tu_eivapaa .tu_autoluokka_kuva img {
		-webkit-filter: grayscale(1);
		-webkit-filter: grayscale(100%);
		filter: gray;
		filter: grayscale(100%);
	}
	
	.tu_varattu {		
		-webkit-filter: grayscale(1);
		-webkit-filter: grayscale(100%);
		filter: gray;
		filter: grayscale(100%);
	}
        
/* 
//=========================================================================	
// AUTO
//=========================================================================	
*/	
	.tu_autoesim { font-weight: bold; }
	
	.tu_autoluokka_kuva {padding: 0 2%; margin: 0px; width: 96%;   text-align: center;}
	
	.tu_autoluokka_kuva img {width: 90%; border-radius: 6px;}
	
	.tu_auto_y { line-height: 35px; padding-left: 10px; padding-right: 10px; font-weight: bold; }	
	.tu_esimerkki img {  }
	.tu_hinta { float:right; }

	.tu_valitseautoluokka {margin-left: 20px; margin-right: 20px; margin-bottom: 0px;}
	.tu_valitsehinta_otsikko { font-size: 1.3em; }
	.tu_valitseotsikko {  }
	.tu_valitsehinta {  }
	
	.tu_valitsehinta small { font-size: 0.5em }
	
	.tu_table {display: table; width: 100%;}
	.tu_tablecell {display: table-cell; vertical-align: top; padding: 1%; }
	.tu_width66 { width: 66%;}
	.tu_width60 { width: 60%;}
	.tu_width50 { width: 50%;}
	.tu_width40 { width: 40%;}
	.tu_width33 { width: 33%;}
	

	.tu_oikea > ul { margin:0px; padding: 0px;}
	.tu_oikea > ul > li { list-style:none; margin:0px; padding:0px;}
	.tu_oikea > ul > li > ul {margin: 0px; padding:0px; font-size:13px; list-style:none;}
	
/* 
//=========================================================================	
// YHTEYSTIEDOT
//=========================================================================	
*/	

	.tu_varausotsikko { height: 40px; line-height: 40px; padding-left: 20px; font-size: 20px; background: rgba(0,0,0,0.05); }

	#tu_lisatarvikeform table { }
	#tu_lisatarvikeform table td {width: 50%;}
	
	#tu_lisatarvikkeet {
		margin: 20px;
		border: 1px solid rgba(0,0,0,0.1);
		border-radius: 8px;
	}
	
	#tu_yhteystiedotform {  }
	
	.tu_yhteystiedot_rivit { padding: 20px 0; }
	
	.tu_yhteystiedot_rivi, .tu_yhteystiedot_textarea { line-height: 30px; display:inline-block; width: 50%; padding: 3px 2%; box-sizing: border-box;}
    .tu_yhteystiedot_textarea {width: 100%; }
	.tu_yhteystiedot_rivi b {text-align: left; display: block; float: left; } 
	.tu_yhteystiedot_rivi input, .tu_yhteystiedot_textarea textarea  {float:left; line-height: 20px; border: 1px solid #DDDDDD; width: 100%; box-sizing: border-box; border-radius: 3px; font-size: 17px; padding: 10px 5px;  }

	.tu_yhteystiedot_rivi input::-webkit-input-placeholder { color: rgba(0,0,0,0.9); font-family: inherit; }
	.tu_yhteystiedot_rivi input::-moz-placeholder { color: rgba(0,0,0,0.9); font-family: inherit; } /* fire fox 19+ */
	.tu_yhteystiedot_rivi input:-ms-input-placeholder { color: rgba(0,0,0,0.9); font-family: inherit;} /*  ie */
	.tu_yhteystiedot_rivi input:-moz-placeholder { color: rgba(0,0,0,0.9); font-family: inherit; }		 
		
	.tu_yhteystiedot_textarea textarea::-webkit-input-placeholder { color: rgba(0,0,0,0.9); font-family: inherit; }
	.tu_yhteystiedot_textarea textarea::-moz-placeholder { color: rgba(0,0,0,0.9); font-family: inherit; } /* firefox 19+ */
	.tu_yhteystiedot_textarea textarea:-ms-input-placeholder { color: rgba(0,0,0,0.9); font-family: inherit;  } /* ie */
	.tu_yhteystiedot_textarea textarea:-moz-placeholder { color: rgba(0,0,0,0.9); font-family: inherit; }
	
	
	.tu_yhteystiedot_rivi span, .tu_yhteystiedot_textarea span { display: block; font-size: 12px; line-height: 17px;  font-family: inherit;}
	.tu_yhteystiedot_textarea textarea {height: 132px;}
	#tu_yhteystiedot_rivi_osoite {width: 100%;}
	#tu_osoite { width: 100%;}

	
	.tu_virheilmoitus {border: 1px solid red; color: red; padding: 15px; margin: 15px; border-radius: 8px;}
	.tu_virhe_input { color: red;}
	.tu_virhe_input input { border-color: red;}
	.tu_piilota {display: none;}
	
	.tu_hintayhteensa {font-size: 25px; }
	
	.tu_nappirivi {}
	.tu_nappirivi .tu_tablecell {
		padding: 0 10px; 
	}

/*
//=========================================================================
// lisatarvikkeet
//=========================================================================
*/
	
	.tu_lisa_rivi { 
		clear: both; 
		padding: 5px 0px; 
		border:none !important; 
		padding: 6px; 
		padding-right: 0;
		background: white;
	}
	.tu_lisa_rivi:nth-child(even){ 
		background: rgba(0,0,0,0.05); 
	}
	
	.tu_lisa_rivi_tiedot {
		display: inline-block;
		vertical-align: middle;
		padding-left: 10px;
		width: calc( 100% - 170px );
	}
	
	.tu_lisa_rivi_nimi {
		display:inline-block;
		vertical-align: middle;
		font-weight: normal; 
		width: calc( 100% - 140px );
		margin-right: 10px;
	}
	.tu_lisa_rivi_nimi b {
		display: block;
	}
	
	.tu_lisa_rivi_input { 
		display: inline-block;
		width: 80px;
		vertical-align: middle;
		text-align: center;
	}
	.tu_lisa_rivi_input .tu_input {
		width:30px;
		height: 35px;
		padding: 0;
		border-radius: 0;
		border: 1px solid rgba(0,0,0,0.8);
		border-left: none;
		border-right: none;
		text-align: center;
		font-weight: bold;
		font-size: 14px;
		box-sizing: border-box;
	}

	.tu_input_button { background: white; height: 35px; width: 25px; display: inline-block; text-align: center; font-size: 25px; line-height: 35px; cursor: pointer; border: 1px solid rgba(0,0,0,0.8); box-sizing: border-box; }	
	.tu_input_inc { float: right; border-radius: 0 4px 4px 0; }
	.tu_input_dec { float: left; border-radius: 4px 0 0 4px; }
	
	.tu_lisa_kertaa { width: 20px; display: inline-block;}
	
	.tu_lisa_lisatieto {font-size: 90%; line-height: 18px; }
	
	.tu_lisa_rivi_hinta { display: inline-block; vertical-align: middle; width:120px;}
	.tu_lisa_rivi_hinta2 { padding-right: 1%;}
	
	.tu_lisa_hinta {text-align: center; font-weight: bold; line-height: 35px; color: #0e51a4;}

	.tu_omavastuu { padding: 10px; display: block; }
	.tu_omavastuu input { display: inline-block; vertical-align: top; }
	.tu_omavastuu label { display: inline-block; padding-left: 10px; vertical-align: top;}
	.tu_lisatiedot_wrapper label { display: inline-block; padding-left: 10px; vertical-align: middle;}
	.tu_omavastuu .tu_hinta_desi { margin-left: 0;}


/*
//=========================================================================
// yhteenveto checkbox, radio
//=========================================================================
*/

.tu_lisatiedot_wrapper input[type=checkbox] { display:none;  }
.tu_lisatiedot_wrapper input[type=checkbox] + label:before {
	font-family: "tu-extraicons" !important;
	display: inline-block;
	font-size: 35px;
}

.tu_lisatiedot_wrapper input[type=checkbox] + label:before { content: "\e900"; } 
.tu_lisatiedot_wrapper input[type=checkbox]:checked + label:before { content: "\e901"; }

.tu_lisatiedot_wrapper input[type=radio] { display:none; }
.tu_lisatiedot_wrapper input[type=radio] + label:before {
	font-family: "tu-extraicons" !important;
	font-size: 30px;
	display: block;
	float:left;
	margin-right: 10px;
}

.tu_lisatiedot_wrapper .tu_maksuvalinta input[type=radio] + label:before {
	font-family: "tu-extraicons" !important;
	font-size: 30px;
	display: inline-block;
	float: inherit;
	vertical-align: middle;
	margin-right: 10px;
}

.tu_lisatiedot_wrapper input[type=radio] + label:before { content: "\e900"; }
.tu_lisatiedot_wrapper input[type=radio]:checked + label:before { content: "\e901"; } 
/*
//=========================================================================
// maksutapa
//=========================================================================
*/

/*
//=========================================================================
// yhteenveto
//=========================================================================
*/


	.tu_yhteenveto_otsikko { font-size: 1.2em; text-align: center;}
	.tu_yhteenveto_kuva { width: 90%; display: block; margin: 10px auto; border-radius: 6px; }

	
    .tu_kiitos { 
		margin: 20px;
		padding: 20px;
		background: white;
    }
    
/*
//=========================================================================
// ominaisuudet
//=========================================================================
*/

	.tu_auto_ominaisuudet {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	.tu_auto_ominaisuudet img {
		width: 18px;
		vertical-align: middle;
		padding-right: 10px;
	}
	
	.tu_auto_ominaisuudet li{
		margin: 10px 0;
		padding: 0;
	}
	.tu_auto_ominaisuudet span{
		display: inline-block;
		vertical-align: middle;
		padding-right: 10px;
	}
	.tu_auto_ominaisuudet b{
		display: inline-block;
		vertical-align: middle;
	}

/*
//=========================================================================
// ominaisuudet
//=========================================================================
*/
	
	.tu_tarjouspyynto_yhteystiedot {
		padding-top: 10px;
	}
	
	.tu_tarjous_select {
		padding: 0 10%;
		padding-top: 10px;
	}
	
	.tu_tarjous_select span {
		font-size: 0.9em;
		margin-right: 10px;
	}
	.tu_tarjous_select select {
			max-width: 300px;
	}
	.tu_autoluokkatarjous {
		font-size: 1.0em;
		padding: 0 10%;

	}

	.tu_tarjouskuva {
		width: 70%;
		border-radius: 8px;
		margin: 10px; auto
	}
	
	.tu_autoluokkatarjous .tu_auto_ominaisuudet img {
		width: 22px;
	}

/*
//=========================================================================
// leveä kaavake
//=========================================================================
*/

@media only screen and (min-width: 768px) {


	.tu_formwide:not(.tu_yhteenveto) .tujausform { display: table; width: 100%; box-sizing: border-box; }
	.tu_formwide:not(.tu_yhteenveto) .tu_box {
		display: table-cell;
		width: 23.5%;
		padding-left: 1%;
		vertical-align: top;
	}
	
	.tu_formwide:not(.tu_yhteenveto) .tu_otsikko_kampanja {
		display: none;
	}
	
	.tu_formwide:not(.tu_yhteenveto) .tujausform .tu_otsikko_nbsp {
		display: block;
	}
	
	.tu_formwide:not(.tu_yhteenveto) hr {
		display: none;
	}
	
	.tu_formwide:not(.tu_yhteenveto) .tu_box_tyyppi {
		width: 10%;
		min-width: 110px;
	}
	.tu_formwide:not(.tu_yhteenveto) .tu_otsikko { width: 100%; }
	.tu_formwide:not(.tu_yhteenveto) .tu_box2 { margin-left: 0px; width: 100%; }
	
	
	.tu_formwide:not(.tu_yhteenveto) .tu_tyyppirivi { 
		display: block;
		margin-left: 0; 
		padding: 10px 8px 10px 0;
		margin: 5px;
		white-space: nowrap;
	}

	.tu_formwide:not(.tu_yhteenveto) #tu_autoluokat_hae { 
		line-height: 63px;
		height: 63px;
	}

		
}

/*
//=========================================================================
// mobiili
//=========================================================================
*/


@media only screen and (min-width: 768px) {
    /* tablets and desktop */
}

@media only screen and (max-width: 767px) {
    /* phones */
 
 	.tu_box { padding: 0; }
 	.tu_otsikko  { padding: 2px 0;}
 	.tu_otsikko_tyyppi  { padding: 0 0 10px 0;}

 	#tujausform hr { margin: 5px 0; }

    .tu_toimipaikka_option, .tu_pvm_option { width: 98%; height: 90%; min-width: 90%; min-height: 90%; position: fixed; top: 10px; left: 1%; z-index: 9999999; background: white;}
	
	.tu_kalenteri, .tu_kalenteri_div { 
		width: 100% !important; 
		margin: 0;
	}
	
	.tu_kalenteri_ok {
		margin-top: 14px;
	}
	

	.tu_kalenteri_otsikko2 {
		display: none;
	}
	
	#tu_autoryhma {
		margin-top: 10px;
		display: block;
	    background: #ededed;
	    border: none;
	    border-radius: 8px !important;
	}
	
	#tu_autoryhma li {
		margin: 0;
		padding: 5px 20px;
		display: block;
		cursor: pointer;
	}
	    
	.tu_autoryhma_valittu {
	    background: white;
	}
 	
	.tu_autoluokka_lista {
		border: none;
	}
    
    .tu_autoluokka_wrapper {display: block; width: 100% !important; }
	.tu_autoluokka_valinta { width:100% !important; display: block; }
	.tu_autoluokka_valittu { width:100% !important; display: block; }
     
    #tu_lisatarvikkeet {
	    margin: 0;
    } 
        
    #tu_lisatarvikeform {display: block; width: 100%;}
    #tu_lisatarvikeform table {display: block; width: 100%;}
    #tu_lisatarvikeform table td, #tu_lisatarvikeform table tbody, #tu_lisatarvikeform table tr {display: block; width: 100%; }
    .tu_yhteystiedot_rivit > div {width: 100%;}
    #tu_osoite {/* width: 90% !important; */}
	
	.tu_auto_valitse_yla { font-size: 13px !important;}
	
	
	.tu_vasen, .tu_oikea {padding: 5px; font-size: 13px; display: block}
	.tu_vasen { width:100% }
	.tu_oikea span {width: 100%}
 
	.tu_yhteystiedot_rivi, .tu_yhteystiedot_textarea { width: 100%; }

	    
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    /* portrait phones */
}

@media only screen and (min-width: 768px) {
    /* tablets and desktop */
}

@media only screen and (max-width: 767px) {
    /* phones */

	.tu_formwide .tujausform { display: block; width: 100%; }
	.tu_formwide .tu_box {
		display: block;
		width: 100%;
		padding-left: 0%;
		float: none;
		vertical-align: top;
	}
	
	.tu_formwide .tu_box_tyyppi {
		width: 100%;
		min-width: 110px;
	}
	.tu_formwide .tujausform .tu_otsikko { float: none; width: auto; }
	.tu_formwide .tujausform .tu_otsikko_nbsp { display: none; }
		.tu_formwide .tu_box2 { margin-left: 0px; }
	
	
	.tu_formwide .tu_tyyppirivi { 
		display: inline-block;
		height: 25px;
		line-height: 25px;
		margin-bottom: 6px;
		margin-left: 20px; 
	}
	
	.tu_clear {
		display: none;
	}

	.tu_table {display: block; width: 100%;}
	.tu_tablecell {display: inline-block; vertical-align: top; padding: 1%; }
	.tu_width66 { width: 100%; margin: 0 auto;}
	.tu_width60 { width: 100%; margin: 0 auto;}
	.tu_width50 { width: 47%; margin: 0 auto; padding: 0;}
	.tu_width40 { width: 100%; margin: 0 auto;}
	.tu_width33 { width: 100%; margin: 0 auto;}


	.tu_autoluokka_kuva {
		padding: 0 !important;
		width: 100% !important;
	}
	
	.tu_nappi {
		font-size: 1.1em;
	}
	
	.tu_lisa_rivi_nimi {
		width: 100%;
		margin-right: 0;
	}
	
	.tu_lisa_rivi_hinta { display: inline-block; vertical-align: middle; width:120px;}

	.tu_nappirivi {
		display: table;
	}
	
	.tu_nappirivi .tu_tablecell {
		display: table-cell;
	}


}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    /* portrait phones */
}