/* TANNHEIM HOME CSS*/

#main { background: none !important; }
.home .ym-col1 { float: left; height: auto; margin: 0 !important; padding: 0 !important; width: 100% !important; z-index: 800; }
.nav-outer { display:none !important; }
#metro { width: 100%; }
#metro .subcl, #metro .subc, #metro .subcr {padding: 0;}
#metro .subcolumns {margin: 0;}

/* BOXEN
------------------------------------------------------------------------------------------ */
#metro .composedcontent-preset_box{ float: left; height: auto; background-color: rgba(255, 153, 0, 1); overflow: hidden; }

/*** -------- Boxen Größen allgemein fest ----------  ***/
#metro .composedcontent-preset_box.small { width: 153px; height: 140px; border-radius: 20px; margin: 5px; }
#metro .composedcontent-preset_box.medium { width: 316px; height: 140px; border-radius: 20px; margin: 5px; }
#metro .composedcontent-preset_box.large { width: 489px; height: 300px; }
#metro .composedcontent-preset_box.xx-large { width: 359px; height: 386px; padding: 70px 60px 0 60px; border-radius: 20px; margin: 5px;}
#metro .composedcontent-preset_box.frei-text {background: url("../../Tannheim_Layout/img/zettel02.png") no-repeat; position: absolute; top: -15px;}

/*** -------- Boxen Größen allgemein ----------  ***/
#metro .composedcontent-preset_box.large.home-buergerservice { float:right; }

/*** -------- Boxen Farben ----------  ***/
#metro .composedcontent-preset_box.dunkelgruen { background-color: rgba(89, 133, 58, 1); }
/*#metro .composedcontent-preset_standardseite.dunkelgruen:hover, #metro .composedcontent-module.dunkelgruen :hover{ background-color: rgba(40, 100, 140, 1); }*/
#metro .composedcontent-preset_box.blau  { background-color: rgba(40, 100, 140, 1); }
#metro .composedcontent-preset_box.hellgruen  { background-color: rgba(119, 113, 113, 1); }
#metro .composedcontent-preset_box .weiss  { background-color: rgba(255, 255, 255, 1); }

/*** -------- Boxen Schrift ----------  ***/
#metro .composedcontent-preset_box h2 { color: rgba(255, 255, 255, 1) !important; font-size: 1.6rem; font-weight: normal; text-align:center; margin: 1em 0.5em; }
#metro .composedcontent-preset_box p  { color: rgba(255, 255, 255, 1) !important; font-family: 'Arial Rounded MT','Comic Sans MS','Open Sans', sans-serif; font-size: 1.5rem; font-weight: bold; text-align:center; /*margin: 1em 0.5em;*/ padding: 0 !important; margin: 0 !important; line-height: 1.5em; }
#metro .composedcontent-preset_box p a {font-weight: inherit !important;}

#metro .composedcontent-preset_box.frei-text h2 { color: #333 !important; line-height: 40px; }
#metro .composedcontent-preset_box.frei-text h2.zeile-oben {margin-bottom: 0; font-family: 'Arial Rounded MT','Comic Sans MS','Open Sans', sans-serif;  font-size: 1.9rem; font-weight: bold;}
#metro .composedcontent-preset_box.frei-text h2.zeile-unten {margin: 0; font-family: 'Arial Rounded MT','Comic Sans MS','Open Sans', sans-serif; font-weight: bold;}
#metro .composedcontent-preset_box.frei-text p { color: #333 !important; font-family: 'Open Sans', sans-serif; font-weight: normal; line-height: 40px; font-size: 1.3rem; margin-top: 40px !important;}

#metro .composedcontent-preset_box p.ico-neubuerger a { width: 80%; height: 90px; display:block; color: #fff !important; padding:40px 10%; }
#metro .composedcontent-preset_box p.ico-neubuerger a::before { font-family: FontAwesome; content: "\f0c0\A"; font-size: 180%; white-space: pre; }
/*#metro .composedcontent-preset_box p.ico-neubuerger a:hover, #metro .composedcontent-preset_box p.ico-neubuerger a:focus, #metro .composedcontent-preset_box p.ico-neubuerger a:active { color: rgba(0, 0, 0, 1) !important; text-decoration: none !important; }*/

#metro .composedcontent-preset_box p.ico-haus a { width: 80%; height: 90px; display:block; color: rgba(255, 255, 255, 1) !important; padding: 30px 10%; }
#metro .composedcontent-preset_box p.ico-haus a::before { font-family: FontAwesome; content: "\f015\A"; font-size: 180%; white-space: pre; }
/*#metro .composedcontent-preset_box p.ico-haus a:hover, #metro .composedcontent-preset_box p.ico-haus a:focus, #metro .composedcontent-preset_box p.ico-haus a:active { text-decoration: none !important; color: #999 !important; }*/

#metro .composedcontent-preset_box p.ico-muellabfuhr a { width: 80%; height: 90px; display:block; color: rgba(255, 255, 255, 1) !important; padding: 30px 10%; }
#metro .composedcontent-preset_box p.ico-muellabfuhr a::before { font-family: FontAwesome; content: "\f014\A"; font-size: 180%; white-space: pre; }
/*#metro .composedcontent-preset_box p.ico-muellabfuhr a:hover, #metro .composedcontent-preset_box p.ico-muellabfuhr a:focus, #metro .composedcontent-preset_box p.ico-muellabfuhr a:active { text-decoration: none !important; color: #ccc !important;}*/

#metro .composedcontent-preset_box p.ico-mitteilung a { width: 80%; display:block; color: rgba(255, 255, 255, 1) !important; padding: 30px 10%; }
#metro .composedcontent-preset_box p.ico-mitteilung a::before { font-family: FontAwesome; content: "\f0e6\A"; font-size: 180%; white-space: pre; }
/*#metro .composedcontent-preset_box p.ico-mitteilung a:hover, #metro .composedcontent-preset_box p.ico-mitteilung a:focus, #metro .composedcontent-preset_box p.ico-mitteilung a:active { text-decoration: none !important; color:#ccc !important; }*/

#metro .composedcontent-preset_box p.ico-veranstaltungen a { width: 80%; display:block; color: rgba(255, 255, 255, 1) !important; padding:30px 10%; }
#metro .composedcontent-preset_box p.ico-veranstaltungen a::before { font-family: FontAwesome; content: "\f073\A"; font-size: 180%; white-space: pre; }
/*#metro .composedcontent-preset_box p.ico-veranstaltungen a:hover, #metro .composedcontent-preset_box p.ico-veranstaltungen a:focus, #metro .composedcontent-preset_box p.ico-veranstaltungen a:active { text-decoration: none !important; color: #ccc !important; }*/

#metro .composedcontent-preset_box p.veranstaltungen {width: 163px; position: absolute; background-color: rgba(40, 100, 140, 1); height: 300px; left: 0; text-align: center;}
#metro .composedcontent-preset_box div.veranstaltungen-termin .zmBox {padding: 25px;}
#metro .composedcontent-preset_box div.veranstaltungen-termin {width: 326px; margin-left: 163px; position: absolute; height: 300px;}
#metro .composedcontent-preset_box div.veranstaltungen-termin .date {font-weight: bold;}
#metro .composedcontent-preset_box div.veranstaltungen-termin h2 { color: #01649b !important; font-size: 1.6rem; font-weight: normal; text-align:left; margin: 0 0 1.5rem 0; line-height: 120%; }
#metro .composedcontent-preset_box div.veranstaltungen-termin h4 {font-weight: bold; margin-bottom: 0;}
#metro .composedcontent-preset_box div.veranstaltungen-termin .zmlinktodata {display: none;}

#metro .composedcontent-preset_box p.ico-aktuell a {line-height: 1; width: 80%; height: 90px; display:block; color: rgba(255, 255, 255, 1) !important; padding:30px 10%; }
#metro .composedcontent-preset_box p.ico-aktuell a::before { font-family: FontAwesome; content: "\f1ea\A"; font-size: 180%; white-space: pre; }
/*#metro .composedcontent-preset_box p.ico-aktuell a:hover, #metro .composedcontent-preset_box p.ico-aktuell a:focus, #metro .composedcontent-preset_box p.ico-aktuell a:active { text-decoration: none !important; color: #ccc  !important; }*/

#metro .composedcontent-preset_box p.ico-ortsplan a { width: 80%; display:block; color: rgba(255, 255, 255, 1) !important; padding: 30px 10%;}
#metro .composedcontent-preset_box p.ico-ortsplan a::before { font-family: FontAwesome; content: "\f278\A"; font-size: 180%; white-space: pre; }
/*#metro .composedcontent-preset_box p.ico-ortsplan a:hover, #metro .composedcontent-preset_box p.ico-ortsplan a:focus, #metro .composedcontent-preset_box p.ico-ortsplan a:active { text-decoration: none !important; color: #ccc !important; }*/

#metro .composedcontent-preset_box p.ico-kontakt a { width: 80%; display:block; color: rgba(255, 255, 255, 1) !important; padding: 30px 10%;}
#metro .composedcontent-preset_box p.ico-kontakt a::before { font-family: FontAwesome; content: "\f0e0\A"; font-size: 180%; white-space: pre; }
/*#metro .composedcontent-preset_box p.ico-kontakt a:hover, #metro .composedcontent-preset_box p.ico-kontakt a:focus, #metro .composedcontent-preset_box p.ico-kontakt a:active { text-decoration: none !important; color: #ccc !important; }*/

#metro .composedcontent-preset_box p.ico-ferienprogramm a { width: 80%; display:block; color: rgba(255, 255, 255, 1) !important; padding:10%; }
#metro .composedcontent-preset_box p.ico-ferienprogramm a::before { font-family: FontAwesome; content: "\f25a\A"; font-size: 180%; white-space: pre; }
/*#metro .composedcontent-preset_box p.ico-ferienprogramm a:hover, #metro .composedcontent-preset_box p.ico-zeitung a:focus, #metro .composedcontent-preset_box p.ico-zeitung a:active { text-decoration: none !important; color: #ccc !important; }*/

#metro .composedcontent-preset_box p.ico-buergerservice a { width: 80%; height: 90%; display:block; color: rgba(255, 255, 255, 1) !important; padding: 30px 10%; }
#metro .composedcontent-preset_box p.ico-buergerservice a::before { font-family: FontAwesome; content: "\f192\A"; font-size: 180%; white-space: pre; }
/*#metro .composedcontent-preset_box p.ico-buergerservice a:hover, #metro .composedcontent-preset_box p.ico-zeitung a:focus, #metro .composedcontent-preset_box p.ico-zeitung a:active { text-decoration: none !important; color: #ccc  !important; }*/

#metro .composedcontent-preset_box p.buergerservice {position: absolute; background-color: rgba(50, 90, 50, 1); height: 300px; width: 163px; right: 0;}

#metro .composedcontent-preset_box p a:hover, #metro .composedcontent-preset_box p  a:focus, #metro .composedcontent-preset_box p  a:active { color:#ccc !important; text-decoration: none !important; }



.home #loginForm {position: relative; width: 457px; height: 269px;}

/*Suchergebnisse
--------------------- */
.body_search #metro .composedcontent-preset_module {display: none;}
.body_search .searchDiv {float: left; background: #fff; padding: 5%; width: 90%;}

/* Responsive Desin Startseite
------------------------------------------------------------------------------------------ */

@media ( max-width: 995px) {  
/* BOXEN Responsive
------------------------------------------------------------------------------------------ */
#metro .ym-gl, #metro  .ym-gr  {float: none; margin: 0;}
#metro .subcolumns {float: left;}
#metro .ym-g50 {width: 100%;}

#main {width: 489px;}

#metro .composedcontent-preset_box.frei-text { position: relative; top: 16px;}
}

@media( max-width: 815px )  {
.ym-col1 {display: block;}
#main {padding: 0px;}

}

@media( max-width: 489px )  {
#main {width: 326px;}

#metro .composedcontent-preset_box.xx-large { background-color: rgba(255, 153, 0, 1); border-radius: 20px; height: auto; margin: 5px; padding: 10px; width: 296px;}
#metro .composedcontent-preset_box.frei-text {background-image: none; top: 0;}

#metro .composedcontent-preset_box.small { width: 316px;}
#metro .composedcontent-preset_box.large { width: 316px;}

}