/* 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) 
{ 

    .ResponsiveDesign .PageContainer { background: none; }

    .ResponsiveDesign .PageHeader { height: auto; }
    .ResponsiveDesign .PageHeader .LogoField { display: none; }
    .ResponsiveDesign .PageHeader .HeaderField { padding: 15px 5px; height: auto; overflow: initial; }
    .ResponsiveDesign .PageHeader .HeaderField h1 { padding-top: 0; }

    .ResponsiveDesign .NavigatorContainer { border: 0; height: 20px; }

    .ResponsiveDesign .Diary .DiaryList ul.FirstLevel,
    .ResponsiveDesign ul.DropMenu { background-color: black; }
    .ResponsiveDesign ul.DropMenu a:hover { background: none; }
    .ResponsiveDesign .Diary .DiaryList ul.FirstLevel * { color: white; }

    .ResponsiveDesign .PageFooter { padding: 0; padding-top: 20px; }
    .ResponsiveDesign .PageFooter .CopyrightText,
    .ResponsiveDesign .PageFooter .dinStudioLink { background-color: black; }


    .ResponsiveDesign .MainPage,
    .ResponsiveDesign .EmptyPage,
    .ResponsiveDesign .TextLayout1,
    .ResponsiveDesign .TextLayout2,
    .ResponsiveDesign .ImageGallery1,
    .ResponsiveDesign .ImageGallery2,
    .ResponsiveDesign .ImageGallery3,
    .ResponsiveDesign .ImageGallery,
    .ResponsiveDesign .FileArea,
    .ResponsiveDesign .Diary,
    .ResponsiveDesign .Guestbook,
    .ResponsiveDesign .Contact { height: auto; border-left: 0; border-right: 0; padding-bottom: 10px; }

    .ResponsiveDesign .TextLayout2 .RightColumn { padding-top: 15px; }

    .ResponsiveDesign .ImageGallery1 .FunctionTable .ImageCell { width: 140px; }

    .ResponsiveDesign .ImageGallery2 .FunctionTable .TextCell,
    .ResponsiveDesign .ImageGallery3 .FunctionTable .TextCell { width: auto; }

    .ResponsiveDesign .Diary .DiaryList ul.FirstLevel { background-color: black; }
    .ResponsiveDesign .Diary .DiaryList a { font-size: 10pt; }

    .ResponsiveDesign .Contact .RightColumn .ImageContainer img { margin-bottom: 10px; }
    .ResponsiveDesign .Contact .RightColumn .ParagraphContainer { max-width: 300px; margin: 0 auto; margin-bottom: 10px; }
    .ResponsiveDesign .Contact .RightColumn .ParagraphContainer * { font-size: 100%; }
    .ResponsiveDesign .Contact .ContactForm input.ContactSubmit { margin-left: 0; }

    .ResponsiveDesign .ImageGallery .Gallery1 .GalleryCell { width: 130px; margin: 4px; }

    .ResponsiveDesign .ImageGallery .Gallery2 .GalleryTextCell { margin-left: 130px; }
    .ResponsiveDesign .ImageGallery .Gallery3 .GalleryTextCell { margin-left: 60px; }
    
    .ResponsiveDesign .ImageGallery .Gallery4 .GalleryImageCell,
    .ResponsiveDesign .ImageGallery .Gallery5 .GalleryImageCell { margin-bottom: 10px; }

    .ResponsiveDesign .ImageGallery .Gallery4 .GalleryImagesRow .GalleryTextCell { margin-left: 130px; }
    .ResponsiveDesign .ImageGallery .Gallery5 .GalleryImagesRow .GalleryTextCell { margin-left: 60px; }

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

}