html, body {height:100%;}

body {
 background:#fff;
 margin: 0;
 padding: 0;
 }

* { 
  margin: 0 auto 0 auto;
  box-sizing:border-box;
}

/* --------------------------------------------- fonts */

@font-face {                       /* CALIBRI */
    font-family: "Calibri";
    src: url("fonts/calibri.ttf");
    src: url("fonts/calibri.eot");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Calibri";
    src: url("fonts/calibrib.ttf");
    src: url("fonts/calibrib.eot");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "Calibri";
    src: url("fonts/calibrii.ttf");
    src: url("fonts/calibrii.eot");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "Calibri";
    src: url("fonts/calibriz.ttf");
    src: url("fonts/calibriz.eot");
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "Calibri Light";
    src: url("fonts/calibril.ttf");
    src: url("fonts/calibril.eot");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Calibri Light";
    src: url("fonts/calibrili.ttf");
    src: url("fonts/calibrili.eot");
    font-weight: normal;
    font-style: italic;
}


@font-face {                                 /* VERDANA */
    font-family: Verdana;
    src: url(fonts/verdana.ttf);
    src: url(fonts/verdana.eot);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Verdana;
    src: url(fonts/verdanai.ttf);
    src: url(fonts/verdanai.eot);
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: Verdana;
    src: url(fonts/verdanab.ttf);
    src: url(fonts/verdanab.eot);
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: Verdana;
    src: url(fonts/verdanaz.ttf);
    src: url(fonts/verdanaz.eot);
    font-weight: bold;
    font-style: italic;
}



/* ---------------------------------------------- allgemeinde */

#container
{ 
  width:100%;
  max-width: 1000px;
  background:#fff;
}

.bc { color:#6D76B7; } /* blu chiaro */
.bs { color:#6B6186; } /* blu scuro  */


/* -------------------------------------------  header */

#header
{
position:relative;
width:98%;
height:110px;
padding:10px 0 0 0;
background: url(../files/logo2-110.gif) top right no-repeat;
border:0px solid red;
text-align:right;
}

/*---------------------- classi per altro-algoritmo --- */

.titolo-posizione {
  margin:0;
  margin-right:30px;
  width:270px;
  float:right;
  min-height:100px;
  padding-top:40px;
  text-align:left;   
  border:0px solid pink;
}

.titolo-grande {
  font: 24px "Calibri Light";
  line-height:90%;
  color:#6B6186;  
  border:0px solid green;
}

.titolo-piccolo {
  font: 20px "Calibri"; 
  line-height:100%;
  color:#6D76B7;
  border:0px solid green;
}

@media only screen and (max-width: 360px) {
.titolo-posizione { width:230px; }
.titolo-grande { font-size:20px; }
.titolo-piccolo { font-size:18px;}
}

/* ---------------------------------------------------- */

.title0 {
  width:100%;
  height:14px;
  border:0px solid pink;
}

.title1 { 
  width:100%;
  height:50px; 
  padding-right:90px;
  text-align:right;   
  font: 24px "Calibri Light";
  color:#6B6186;  
  line-height:70px;
  border:0px solid green;
}

.title2 {
  width:100%; 
  padding-right:166px;  
  text-align:right;  
  font: 20px "Calibri"; 
  line-height:100%;
  color:#6D76B7;
  border:0px solid green;
}

.grande { font-size:38px; }

.bandiere
{
position:absolute;
left:5px;
top:5px;
}

.bandiere img {
 border:1px solid #6D76B7;
}


.bandiere img:hover{
 opacity:.6;
}


@media only screen and (max-width: 360px) {
.title1 { font-size:20px; }
.grande { font-size:34px; }
.title2 { font-size:18px; padding-right: 150px; }
.bandiere {  }
}

@media only screen and (max-width: 280px) {
.title1 { font-size:14px; }
.grande { font-size:28px; }
.title2 { font-size:12px; padding-right: 140px; }
}



/* -------------------------------------------  menu */

#menu-orizzontale { 
  width:100%;
  padding: 3px 0;
  background:#fff;
  text-align:left;
  border:0px solid red;
}


#menu-orizzontale a {
  display:inline-block;
  border-size:border-box;
  padding:0 10px;
  font:15px "Calibri Light";
  border-right:2px solid #6D76B7;
  transition:0.5s;
  overflow:hidden; 
  color:#6D76B7; 
}

#menu-orizzontale a big {font-weight:normal; font-size:23px;}

#menu-orizzontale a:hover{ color:#ddd; }
#menu-orizzontale a.ultimo { border-right:0; }
#menu-orizzontale a.active { font-weight:bold;}
#menu-orizzontale a.active big { font-weight:bold; }
/* #menu-orizzontale a.active big {text-decoration:underline;} */

.breite {  text-decoration:none; }

@media only screen and (max-width: 740px) {
   .breite {width:150px;}
   #menu-orizzontale { text-align:center; padding:15px 0 10px 0; }
   #menu-orizzontale a.ultimo {border-right:1px solid #6D76B7;}
   #menu-orizzontale a { display:inline-block; text-align:left; padding:8px; 
                         border:1px solid #6D76B7; margin:3px; }
   #menu-orizzontale a:hover{ color:#fff; background:#6D76B7;}    
}

/* -----------------------------------------------  foto */



.bild
{ 
  width:100%;
  height:300px;
  border-top:2px solid #fff;
  border-bottom:2px solid #fff;
}

.striscia {
  width:100%;
  min-height:60px;
  background: #465F81;
  background: #6D76B7;
  font: 22px Calibri; 
  color: #fff;
  text-align:center;
  padding:10px;
  text-transform: uppercase;
  text-shadow: 2px 2px #333;
}

.schwerpunkten {
  font: 14px Calibri; 
  text-shadow: 1px 1px #000;
  }

.jpm01 {background: url(jpm01.jpg) center center no-repeat; background-size:cover;}
.jpm02 {background: url(jpm02.jpg) bottom center no-repeat; background-size:cover;}
.jpm03 {background: url(jpm03.jpg) center center no-repeat; background-size:cover;}
.jpm04 {background: url(jpm04.jpg) top center no-repeat; background-size:cover;}
.jpm05 {background: url(jpm05.jpg) center right no-repeat; background-size:cover;}
.jpm06 {background: #5B86D5 url(jpm06.jpg) top center no-repeat;}
.jpm07 {background: url(jpm07.jpg) center center no-repeat; background-size:cover;}


/* ---- solo per le foto non centrate */

@media only screen and (max-width: 500px) {
.jpm05 {background: url(jpm05c.jpg) center right no-repeat; background-size:cover;}
}


/* -------------------------------------------  colonne  */


.row:after {
    content: "";
    clear: both;
    display: table;
}

[class*="col-"] {
  float:left;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 800px) {
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}


@media only screen and (max-width: 500px) {
  [class*="col-"] { width: 100%;}
}


/* -------------------------------------------  fondo pagina */

#fine
{
 box-sizing:border-box;
 width:100%;
 min-height:30px;
 padding:10px 0;
 background-color: #465F81;
 background: #6D76B7;
 font-family:Verdana;
 font-size:10px;
 color:white;
 text-align: center;
 padding-bottom:10px;
 border: 0px solid yellow;
 border:0px solid red;
}

#f-br {display:inline-block;}

@media only screen and (max-width: 500px) {
   #f-br {display:block;}
}


#annuncio
{
 width:100%;
 min-height:30px;
 padding:30px 5px;
 font:12px Verdana;
 color:#333;
 background-color:#f7f7f7;
 text-align:center;
 border-radius:0px;
 border: 0px solid yellow;

}

#an, #sub-an {display:inline-block;}
#ghost {display:inline-block;}
#sub-ghost {display:inline-block;}


@media only screen and (max-width: 780px) {
   #an {display:block;}
   #ghost {display:none;}
   #annuncio { border-radius:0px;}
}

@media only screen and (max-width: 400px) {
   #sub-an {display:block; }
   #sub-ghost {display:none;}
   #annuncio { border-radius:0px;}
}

#up {text-align:center;border-radius:50%;width:40px;height:40px;
     color:white; border:2px solid white;}
#up a {color:white;line-height:30px;font-size:20px;text-decoration:none;}
#up a:hover {color:#ccc;}


/* ---------------------------------------- patch clearfix */

.clearfix:after{
content:".";
clear:both;
display:block;
height:0;
visibility:hidden;
}

*:first-child+html .clearfix {min-height:0;}
* html .clearfix {height:1%;}
.clearfix:before, .clearfix:after {
content:"";
display:table;}

.clearfix:after {clear:both;}
.clearfix {zoom:1;}