﻿/* Letzte Aenderung: 20/09/23 */

/* MEDIA QUERIES  Max 450 - Small devices (portrait tablets and large phones, 450px and up) */

@media only screen and (max-width: 450px) {

	body {
		width:450px;
		max-width:450px;
		margin: 0px;
		padding: 0px;
		font-size: 90%;
		font-style: normal;
		font-variant: normal;
		font-weight: normal;
		text-align: left;
		color: #2c2c2c;
		background-image:none;
		background: #FFFFFF;
		background-color: rgb(243, 237, 223, 1);
	}

	div#wrapper {
		width:98%;*/
		margin: 0px auto;
		padding: 0px auto;
	}
	
	/* Container, der das Logo enthält */
	div#header {
		width:90%;	
		height:155px;
	}

	div#footer {
		float: left;
		width: 	90%;
		height:auto;
		text-align: left;
	}
	
	
div.Grafik01 {
	float: left;
	width:29%;
	max-width: 180px;
	margin: 0px 6px 0px 2px;   /* oben rechts unten links */
	padding: 0px 5px 0px 0px;
	border: 1px solid yellow;
	height: auto;
	text-align: center;
	background-color:#EAEAEA;
	font-size: 8px;
}

.boxImmagine {
	float:left;
*/	/* Dimensionen */	
	width: 30%;
	height: auto;
	/* Padding - Innenabstand - valori in senso orario */;
	margin: 0px 6px 0px 2px;   /* oben rechts unten links */
	padding: 0px 5px 0px 0px;
  	display: inline-block;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	font-size:44px;
}

div.boxImmagine img {
	width:90%;
	min-width:90%; 
}

div.boxImmagine h2 {
	margin-bottom:5px;
}

.Grafik01 img {
	display: inline;
	margin: 0px 5px 10px 0px;
	padding: 0px 5px 10px 0px;
	border: 1px solid brown;
	max-width:88%;
	height:auto; 
}
  	.example {background: green;}
	#nomeDitta {background: green;}

	div#logo {
		float: right;
		margin-top:-90px;
		margin-right:-125px;
		background-image: url('../images/logo/logo_SR_GEST_Neu_50x25.png');
		background-repeat: no-repeat;}

	#NomeDitta h2 {
		font-size:100%;
		font-weight:normal;
/*		color:yellow;*/
		text-align:left;
	}

	div#header h1 {
		padding: 0;
		margin: 0;
		line-height:.50;
	}

	div#content {
		width:90%;
/*		height:auto;*/
		font-size: 80%;
		background-image:none;		
	}

	div#content h2 {
		font-size: 80%;
		margin:0;
		padding:10px;
	}

	div#content p {
		margin: 5px 0px 0px 0px;
		padding: 5px 0px 0px 0px;
	}

	#content .selezione {
		font-size:80%;
	}

	#intro {
  	font-size: 70%;
    padding-left: 0px;
/*  text-shadow: 2px 2px 2px #111;*/
    text-align:left;
    color:blue;
  }

  h1 {
    text-align: center;
	font-size: 70%;    
  }

	.col {
	width:90%;
	  margin-left: 5px;
	  padding: 5px 5px;
	  font-size:80%;
	}

	.col1 {
	  margin-left: 0;
	  padding: 0.8em 0;
	  font-size:80%;
	}

/*	.col:first-child {
	  margin-left: 0;
	  font-size:80%;
	}
*/
	.carattere {
		font-size:80%;
	}

	div#mainNav { 
	display:inline-block;
	width:90%;
/*	min-width:450px;*/
	height:auto;
	}

	div#mainNav ul {
		float:none;
		width:90%;
		margin: 0px 5px 5px 5px;
		padding:0px
	}

	div#mainNav>ul>li {
		float:left;
		width: 90%;
		height:auto;
		margin: 0px 5px 5px 5px;
		padding:0px
	}

	div#mainNav li {
		float:none;
		width:90%;
		display:inline-block;
	}

	div#mainNav li#active span,
	div#mainNav li a,
	div#mainNav li a span {
		float:none;
		width:90%;
		padding:0;
	}

	div#mainNav li a {
		height:27px;
		text-align: left;
		margin:0;
		padding:0;
/*		text-indent:10px;*/
		-webkit-border-radius:0px;
		-moz-border-radius:0px;
		border-radius:0px;
	}

	div#mainNav li #active {
		height:27px;
		text-align: left;
		margin:0;
		padding:0;
		text-indent:10px;
	}

	p.piedeP03 {
		width:80%;
		color: red;
	}
}   /* Ende   */
