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

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

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

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

    html, body { height: auto; background: none; }

    .ResponsiveDesign .ContentHeader,
    .ResponsiveDesign .ContentTable .ContentColumn {
      position: static;
      width: auto;
      min-height: initial;
      margin-left: 0;
      background: none;
    }
    .ResponsiveDesign .ContentTable .ContentColumn { background-color: white; }
    
    .ResponsiveDesign .ContentBody { padding: 0; }
    .ResponsiveDesign .ContentTable { display: block; padding: 0; margin: 0; width: auto; }
    .ResponsiveDesign .ContentTable .PageRow { display: block; }
    .ResponsiveDesign .ContentTable .NavigatorColumn, 
    .ResponsiveDesign .ContentTable .ContentColumn { display: block; padding: 0; border: 0; }
    .ResponsiveDesign .ContentTable .NavigatorContainer { border: 0; }
    .ResponsiveDesign .ContentTable .ContentColumn .ContentContainer { padding-bottom: 20px; }

    .ResponsiveDesign .PageFooterContainer,
    .ResponsiveDesign .PageFooterContainer .PageFooter .dinStudioLink { position: static; font-size: 10pt; }
    .ResponsiveDesign .PageFooterContainer .PageFooter { height: 100px; background-position: center -50px; }

    .ResponsiveDesign .CopyrightContainer,
    .ResponsiveDesign .BackgroundContainer { display: none; }

    .ResponsiveDesign ul.DropMenu { padding: 0; }
    .ResponsiveDesign .Diary .DiaryList ul.FirstLevel *,
    .ResponsiveDesign ul.DropMenu li a,
    .ResponsiveDesign ul.DropMenu li * { color: white }


    .ResponsiveDesign .MainPage .NewsHeader { margin-top: 10px; }
    .ResponsiveDesign .MainPage .NewsHeader .ParagraphContainer,
    .ResponsiveDesign .MainPage .NewsItem { margin-left: 0; }
    
    .ResponsiveDesign .TextLayout1 .RightColumn .ParagraphContainer { font-size: 10pt; }

    .ResponsiveDesign .TextLayout2 .InlineImageContainer { margin: 0; }

    .ResponsiveDesign .ImageGallery1 .FunctionTable { width: auto; max-width: 480px; margin: 20px auto; }
    .ResponsiveDesign .ImageGallery1 .FunctionTable .ImageCell { width: 140px; padding: 0 10px; }
    .ResponsiveDesign .ImageGallery1 .FunctionTable .ParagraphContainer  { padding: 0; }
    .ResponsiveDesign .ImageGallery2 .FunctionTable .TextCell,
    .ResponsiveDesign .ImageGallery3 .FunctionTable .TextCell { width: auto; }

    .ResponsiveDesign .Diary .DiaryList ul.FirstLevel { background: black; }
    .ResponsiveDesign .Diary .DiaryList ul.FirstLevel * { color: white; }

    .ResponsiveDesign .Guestbook .GuestbookForm input.GuestSubmit, 
    .ResponsiveDesign .Contact .ContactForm input.ContactSubmit { margin-left: 0; }
    
    .ResponsiveDesign .Contact .RightColumn { width: auto; }
    .ResponsiveDesign .Contact .RightColumn .ParagraphContainer { font-size: 10pt; width: auto; }
    .ResponsiveDesign .Contact .RightColumn .ImageContainer img { max-width: 100%; }

    .ResponsiveDesign .ImageGallery .Gallery1 .GalleryCell { width: 130px; padding: 5px; }

    .ResponsiveDesign .ImageGallery .Gallery4 .ImageContainer { margin-bottom: 10px; }
    .ResponsiveDesign .ImageGallery .Gallery5 .ImageContainer { margin-bottom: 10px; }

    .ResponsiveDesign .ImageGallery .Slide1 .ImageContainer img,
    .ResponsiveDesign .ImageGallery .Slide2 .ImageContainer img,
    .ResponsiveDesign .ImageGallery .Slide3 .ImageContainer img { width: 100%; }


}