
/* Tablet/iPad */
@media only screen and (max-width: 980px) {

  ul.DataFoldList,
  ul.DataFoldList li,
  ul.DataFoldList li ul,
  ul.DataFoldList li ul li    {height: auto; list-style-image: url(../img/_layout/list_bullet.png); list-style-type:disc; transition: none; -webkit-transition: none; -moz-transition: none; -o-transition: none; }
  ul.DataFoldList li ul       {padding-top: 10px;}

  #ContentBoxTop .ContExtraMenu      {left: 5px !important; width: 50% !important; margin: 0px !important; }
  #ContentBoxBottom .ContExtraMenu   {}
  #ContentBoxBottom                  {width: auto !important; padding: 0px 10px !important; }
  .FooterSubLine p,
  .ContentContainer,
  .ContentContainerInner,
  .bottomline,
  .socialbar,
  .LabelBoxInner,
  #pageContainer              {width: 100% !important; overflow: hidden !important; }
  #ContentBoxTop,
  #ContentBoxTopInner         {width: 100% !important; }
  .ContentContainer           {width: auto !important; padding-left: 0px !important; padding-right: 0px !important; }
  .ContentBoxMiddle           {width: auto !important; padding: 20px 10px 0px !important; }
  .headerBox                  {right: 10px !important; }

  #pageBody                   {background: transparent !important; }    
  .LabelBox,
  .LabelBox p                 {background-position: left top !important; }
  .headerBoxLogo              {margin: 0px 0px 0px 10px !important; }
  .headerBox                  {background: transparent !important; }
  .headerBoxLogo img          {max-width: 100% !important; height: auto !important;}
  #pageBottom                 {position: relative !important; width: 100% !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; height: 100% !important; margin: 0px !important; padding: 0px !important; }
  .sociallinks                {/*display: none !important; */}

  .BackgroundImageLabel,
  .BackgroundImageBtns        {/*display: none !important; */}
  .BackgroundImage            {height: 250px !important; }
  .leftarrow                  {left:  0px; }
  .rightarrow                 {right: 0px; }

  #ContentBoxTopBottom        {left: 0px; width: 100%; margin: 0px; }
  #mainnavstart               {right: 10px; }

  .mainnavIcon                            {left: 0px !important; margin: 0px !important; }
  ul.makeMenu a                           {font-size: 13px !important; }
  ul.makeMenu a.TopMenu, a.TopMenu_sel    {margin: 0px 1px !important; padding-left: 15px !important; padding-right: 15px !important; }

}

/* Tablet/iPad */
@media only screen and (max-width: 800px) {
  .BackgroundImage                        {width: 100% !important; height: 220px !important; }
  .Slidearrow                             {top: 40px; width: 50px; height: 140px; }
  .LabelBox                               {display: none !important; }
  .ContentBoxMiddle                       {}
  .ContentBoxRight                        {width: auto !important; margin: 0px !important; padding: 0px !important; background: transparent !important; -moz-border-radius: none !important; -webkit-border-radius: none !important; -khtml-border-radius: none !important; border-radius: none !important; box-shadow: none !important; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; }

  #ContentBoxBottom ul.LanguageBox        {margin-left: 0px !important; }
  .ContentTextBoxLeft,
  .ContentTextBoxRight                    {width: 260px !important; }
  .ContentImgBoxLeft,
  .ContentImgBoxRight                     {width: 120px !important; }
  .FooterBox                              {font-size: 13px; }
  .FooterBoxCol                           {width: 30% !important; }

  div.tile                                {width: 125px !important; }
  div.tile img                            {width: 100% !important; min-width: none !important; }
  div.tile a.imgbox                       {width: 125px !important; height: 140px !important; }
  
  h1                                      {font-size: 26px; }
  ul.makeMenu a                           {font-size: 12px !important; }
  ul.makeMenu a.TopMenu, a.TopMenu_sel    {margin: 0px 1px !important; padding-left: 10px !important; padding-right: 10px !important; }
}


/* iPhones and others */
/* @media only screen and (-webkit-min-device-pixel-ratio:1.5) { */
@media only screen and (max-width: 640px) {
  .show-desktop-0             {display: block !important; }
  .show-desktop-1,
  .show-mobile-0              {display: none !important; }
  body 											  {font-size: 13px; background: #ffffff !important; }
  .headerBox                  {width: 238px !important; margin: 0px 0px 0px -119px !important; left: 50% !important; bottom: auto !important; top: 5px !important; right: auto !important; }
  .headerBoxLogo              {width: 100% !important; position: relative !important; left: auto !important; top: auto !important; }
  .SearchBox                  {display: none !important; top: -8px !important; right: 10px !important; width: 25px !important; height: 25px !important; padding: 3px !important; border-color: #ffffff !important; background: transparent !important; z-index: 1000 !important; }
  #searchform input.SearchBoxsubmit {background-position: 3px 1px !important; }
  #searchform input.SearchBoxsubmit {background-image: url(../img/_layout/icon_searchsubmit_inv.png) !important; }

  .BreadCrumbBox,
  .headerBoxAdress,
  #doctextsizer,
  .ContentBoxLeft,
  #searchform label,
  #searchform input                  {display: none !important; }
  #searchform input.SearchBoxsubmit  {display: block !important; margin: 2px !important; }

  #pageContainer              {background: transparent !important;  padding-top: 0px !important; }
  .BackgroundImage            {height: 160px !important; }
  .BackgroundImageLabel       {display: none !important; }
  #start .BackgroundImage     { }
  .Slidearrow                 {top: 40px; width: 40px; height: 120px; }
  
  .socialbar,
  .sociallinks,
  #start .FooterBox,
  .FooterBox                  {text-align: left; }
  .FooterBox a.extrabutton    {display: block !important; }

  .LabelBox,
  .socialbar,
  .sociallinks,
  .FooterBox,
  #ContentBoxTop              {display: none !important; }
  #start #ContentBoxTop       {display: block !important; }
  #ContentBoxTop,
  .ContentBoxTop-fixed,
  .ContentBoxTop-first        {position: fixed !important; height: 120px !important; }
  #ContentBoxTop .bottomline  {display: none !important; }
  #ContentBoxTop .headerBox           {position: fixed !important; height: 100px !important; }
  #ContentBoxTop .headerBoxLogo img   {margin: 5px 0px; height: 100px !important; }
  #start .HeaderTopMenu       {top: auto !important; width: 100% !important; text-align: center !important; }
  .mediabox                   {height: 300px !important; }

  #mainnav,
  ul.makeMenu                 {display: none !important; }
  #start ul.makeMenu          {}

  .ContentTextBoxLeft,
  .ContentTextBoxRight        {width: 50% !important; }
  .ContentImgBoxLeft,
  .ContentImgBoxRight         {width: 30% !important; }
  .ContentImgBoxNormal img,
  .ContentImgBoxLeft img,
  .ContentImgBoxRight img     {max-width: 100% !important; } 

  h1                          {font-size: 22px; }
  h3                          {font-size: 110%; 	}
  #start h1                   {margin-bottom: 5px; text-align: center; }
  #start h2                   {text-align: center; }
  #start .ContentBoxRight
  #start .NewsBox             {width: 100% !important; text-align: center !important; }
  #start div.tile             {display: inline-block !important; float: none !important; height: 120px !important; width: 120px !important; }
  
  .ContentContainer           {width: auto !important; padding: 40px 0px 40px 0px !important; overflow: hidden !important; }
  #start .ContentContainer    {padding-top: 120px !important; }

  .body-termine .ContentBoxMiddle,
  .body-main_wide .ContentBoxMiddle,
  .ContentBoxMiddle,
  .ContentBoxRight            {margin: 0px !important; background: transparent !important; -moz-border-radius: none !important; -webkit-border-radius: none !important; -khtml-border-radius: none !important; border-radius: none !important; box-shadow: none !important; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; }
  .ContentBoxMiddle           {padding-top: 20px !important; }
  .ContentTextBoxLeft,
  .ContentTextBoxRight,
  .ContentImgBoxLeft,
  .ContentImgBoxRight         {/*width: auto !important; float: none !important; */}
  ul.makeMenu a               {margin: 0px 15px 15px 0px !important; }

  /* EXTRA-MENU */
  #ContentBoxBottom           {position: fixed !important; display: block !important; background: #003871 !important; top: 0px !important; bottom: auto !important; width: 100% !important; height: 40px !important; margin: 0px !important; padding: 0px !important; z-index: 2000 !important; box-shadow: 0px 0px 10px rgba(0,0,0,0.75) !important; -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.75) !important; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.75) !important; }
  #start #ContentBoxBottom    {position: fixed !important; display: block !important; background: #003871 !important; top: auto !important; bottom: 0px !important; width: 100% !important; height: 40px !important; border-bottom: none !important; }
  .ContExtraMenu              {position: absolute !important; display: block !important; width: 100% !important; top: 0px !important; right: auto !important; bottom: auto !important; left: 0px !important; height: auto !important; margin: 0px !important; padding: 0px !important; background: transparent !important; z-index: 2001 !important; }
  #ContentBoxTop .ContExtraMenu {display: none !important; }
  ul.makeExtraMenu	          {width: 90%; text-align:center; margin: -4px 20px 0px 0px !important; padding: 0px !important; }
  ul.makeExtraMenu li         {display: inline-block !important; float: none !important; width: 13% !important; margin: 0px !important; padding: 0px !important; }
  #start ul.makeExtraMenu li  {width: 17% !important; }
  ul.makeExtraMenu li a       {color: transparent !important; height: 40px !important; min-width: none !important; width: 100% !important; background-position: center center !important; border-color: #ffffff !important; margin: 0px !important; padding: 0px 0px !important; }
  .extramenu-back             {border-left: none !important; } 
  a.printbtn,
  ul.makeExtraMenu li.li-extramenu-print         {display: none !important;}

  /* HOME: EXTRA-MENU */
  #start .extramenu-back,
  #start .li-extramenu-back   {display: none !important;}
  li.li-extramenu-1   		    {display: block !important;} /* Home */

  .extramenu-back  { background-repeat: no-repeat !important; background-position: center 0px !important; background-image: url(../img/_layout/icon_back.png) !important; } /* Back */
  .extramenu-1     { background-repeat: no-repeat !important; background-position: center 0px !important; background-image: url(../img/_layout/icon_home.png) !important; } /* Home */
  .extramenu-2     { background-repeat: no-repeat !important; background-position: center 0px !important; background-image: url(../img/_layout/icon_contact.png) !important; } /* Kontakt */
  .extramenu-5     { background-repeat: no-repeat !important; background-position: center 0px !important; background-image: url(../img/_layout/icon_location.png) !important; } /* Anfahrt */
  .extramenu-3     { background-repeat: no-repeat !important; background-position: center 0px !important; background-image: url(../img/_layout/icon_imprint.png) !important; } /* Impressum */
  .extramenu-87    { background-repeat: no-repeat !important; background-position: center 0px !important; background-image: url(../img/_layout/icon_dataprotection.png) !important; } /* Disclaimer */
  .extramenu-4     { background-repeat: no-repeat !important; background-position: center 0px !important; background-image: url(../img/_layout/icon_sitemap.png) !important; } /* Sitemap */

  /* Language-Menu-Start */
  ul.LanguageBox                             {display: none !important; }
  #start #ContentBoxTop ul.LanguageBox       {display: block !important; position: absolute !important; left: 50% !important; right: auto !important; bottom: 5px !important; margin: 0px 0px 0px -70px !important; }
  #start #ContentBoxTop ul.LanguageBox li a  {font-size: 11px !important; }

  /* Sitemap */
  .body-sitemap .BackgroundImage,
  .body-sitemap .FooterBox,
  .body-sitemap h1                        {display: none !important; }
  .body-sitemap .ContentBoxMiddle         {padding: 42px 0px 0px 0px !important; }
  .body-sitemap .ContentContainer         {padding: 0px 0px 50px 0px !important; background: transparent; }
  ul.Sitemap                              {font-weight: normal; width: 100%; height: auto; display:block; background: transparent; margin: 0px; padding: 0px; overflow: visible; text-align:left; }
  ul.Sitemap ul 	                  	    {position: relative; list-style-type: none; display: none !important;  background: transparent; width: auto; height:auto;                          margin: 0px 0px 0px 0px !important; padding: 0px !important; overflow: visible; }
  ul.Sitemap li                           {position: relative; list-style-type: none; display: block; background: transparent; width: auto; height: auto; list-style-image: none; margin: 0px 0px 0px 0px !important; padding: 0px !important; overflow: visible; }
  ul.Sitemap li:hover, ul.Sitemap li.CSStoHighlight { background-color: transparent;}
  ul.Sitemap ul.CSStoShow                 {display: block !important;}
  ul.Sitemap li:hover ul                  {display: block !important;}
  ul.Sitemap *                            {line-height: normal !important;} /* overriding my normal stylesheet */
  ul.Sitemap li a                         {display: block !important; color: #ffffff !important; background: #003871 !important; font-size: 16px !important; text-transform: uppercase !important; height: auto !important; font-weight: normal !important; margin: 0px !important; padding: 12px 10px !important; border: none !important; border-bottom: 1px solid #ffffff !important; overflow: hidden !important; }
  ul.Sitemap li a:hover                   {color: #ffffff !important; background: #003871 !important; font-weight: bold !important; }
  ul.Sitemap li ul li a                   {color: #ffffff !important; background-image: url(../img/_layout/bg_white_trans20.png) !important; font-size: 15px !important; text-transform: uppercase !important; padding: 12px 5px 12px 35px !important; }
  ul.Sitemap li ul li a:hover             {}
  ul.Sitemap li ul li ul li a             {background-image: url(../img/_layout/bg_white_trans30.png) !important; font-size: 14px !important; text-transform: uppercase !important; padding: 12px 5px 12px 55px !important; border-bottom: 1px solid #bbbbbb !important; }
  ul.Sitemap li ul li ul li a:hover       {}
  ul.Sitemap li ul li ul li ul li a       {padding: 4px 5px 4px 75px !important; }
  ul.Sitemap li ul li ul li ul li a:hover {}

  /* Forms */
  table                           {/*display: none !important;*/ font-size: 85%; }
  #contactform select,
  #contactform textarea,
  #contactform input[type=text],
  #contactform label              {width: 90% !important; }
  #calendarform                   {/*display: none !important; */}
  #calendarform select,
  #calendarform input[type=text],
  #calendarform label             {font-size: 12px !important; width: 95% !important; }
  #calendarform input.number      {width: 60px !important; }

  /*Columns*/
  div.leftcol,
  div.rightcol,
  div.col                         {width: 46% !important; }
  div.col1,
  div.col2,
  div.col3                        {width: 30% !important; }
  div.colbig                      {width: 100% !important; }

}


@media only screen and (max-width: 480px) {
  .BackgroundImage            {height: 120px !important; }

  div.tile                    {width: 100px !important; }
  div.tile img                {width: 100% !important; min-width: none !important; }
  div.tile a.imgbox           {width: 100px !important; height: 120px !important; }

  /*Columns*/
  div.leftcolumn,
  div.rightcolumn,
  div.leftcol,
  div.rightcol,
  div.col,
  div.col1,
  div.col2,
  div.col3,
  div.colbig                  {margin: 0px 0px 10px 0px !important; width: 100% !important; float: none !important; }
}

  
@media only screen and (max-width: 340px) {

  div.tile                    {width: 90px !important; }
  .mediabox                   {height: 260px !important; padding-top: -40px !important; }

  .ContentTextBoxLeft,
  .ContentTextBoxRight,
  .ContentImgBoxLeft,
  .ContentImgBoxRight         {width: auto !important; float: none !important; }

}
