/* 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,
    .ResponsiveDesign .PageContainer .ContentContainer .ContentContainerMiddleRepeat { background: none; background-color: #141414; }
    .ResponsiveDesign .PageContainer { padding-bottom: 20px; }
    .ResponsiveDesign .MenuContainer .MenuField { width: auto; padding: 0; }
    .ResponsiveDesign .HeaderContainer { width: auto; padding-top: 10px; }
    .ResponsiveDesign .HeadlineField { width: auto; padding: 5px; }
    .ResponsiveDesign .PageContainer .ContentContainer .ContentContainerTop { height: 40px; }
    
    .ResponsiveDesign .PageContainer .ContentContainer .ContentContainerBottom,
    .ResponsiveDesign .FooterContainer .FooterContainerTop, 
    .ResponsiveDesign .FooterContainer .FooterContainerBottom { display: none; }
    .ResponsiveDesign .FooterContainer .FooterContainerMiddle { padding: 0; padding-top: 10px; background: none; }
    .ResponsiveDesign .FooterContainer { border-top: 1px solid #474747; }
    .ResponsiveDesign .dinStudioLink { padding-bottom: 10px !important; }

    .ResponsiveDesign ul.DropMenu { }
    .ResponsiveDesign ul.DropMenu a.toplevel { height: auto; }
    .ResponsiveDesign ul.DropMenu a:hover,
    .ResponsiveDesign ul.DropMenu li.active a.toplevel { background: none; color: white; height: auto; }

    .ResponsiveDesign .MainPage .NewsHeader .ParagraphContainer { padding: 10px 0; width: auto; }
    .ResponsiveDesign .MainPage .NewsContainer .NewsItem { 
        margin-left: 0; 
        margin-bottom: 20px;
        width: auto; 
        padding: 10px; 
        background-color: #272727; 
        border: 1px solid #474747; 
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }
    .ResponsiveDesign .MainPage .NewsContainer .NewsItem div { background: none; padding: 0; margin: 0; height: auto; width: auto; }
    
    .ResponsiveDesign .TextLayout1 .RightColumn { 
        width: 200px;
        margin: 0;
        padding: 5px; 
        background-color: #272727; 
        border: 1px solid #474747; 
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }
    .ResponsiveDesign .TextLayout1 .FunctionTable .RightColumn .ImageContainer,
    .ResponsiveDesign .TextLayout1 .FunctionTable .RightColumn .ImageContainer div {
        padding: 0;
        margin: 0;
        width: auto;
        height: auto;
        background: none;
    }
    .ResponsiveDesign .TextLayout1 .FunctionTable .RightColumn .ImageContainer,
    .ResponsiveDesign .TextLayout1 .FunctionTable .RightColumn .ParagraphContainer { width: auto; padding: 5px; }

    .ResponsiveDesign .ImageGallery1 .FunctionTable .ImageCell { padding: 0; width: 140px; margin: 5px; }

    .ResponsiveDesign .ImageGallery1 .FunctionTable .ImageContainer,
    .ResponsiveDesign .ImageGallery1 .FunctionTable .ImageContainer div,
    .ResponsiveDesign .ImageGallery2 .FunctionTable .ImageContainer,
    .ResponsiveDesign .ImageGallery2 .FunctionTable .ImageContainer div,
    .ResponsiveDesign .ImageGallery3 .FunctionTable .ImageContainer,
    .ResponsiveDesign .ImageGallery3 .FunctionTable .ImageContainer div {
        padding: 0;
        margin: 0;
        width: auto;
        height: auto;
        background: none;
    }
    .ResponsiveDesign .ImageGallery1 .FunctionTable .ImageContainer,
    .ResponsiveDesign .ImageGallery2 .FunctionTable .ImageContainer,
    .ResponsiveDesign .ImageGallery3 .FunctionTable .ImageContainer { 
        width: 120px;
        margin: 0;
        padding: 10px; 
        background-color: #272727; 
        border: 1px solid #474747; 
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }
    .ResponsiveDesign .ImageGallery3 .FunctionTable .ImageContainer { width: 50px; }

    .ResponsiveDesign .ImageGallery2 .FunctionTable .ImageRow,
    .ResponsiveDesign .ImageGallery3 .FunctionTable .ImageRow { margin-bottom: 15px; }

    .ResponsiveDesign .ImageGallery2 .FunctionTable .TextCell,
    .ResponsiveDesign .ImageGallery3 .FunctionTable .TextCell { width: auto; margin-left: 150px; }
    .ResponsiveDesign .ImageGallery3 .FunctionTable .TextCell { margin-left: 80px; }
    .ResponsiveDesign .ImageGallery2 .FunctionTable .ParagraphContainer,
    .ResponsiveDesign .ImageGallery3 .FunctionTable .ParagraphContainer { padding: 0; }

    .ResponsiveDesign .Diary .DiaryList ul.FirstLevel a { color: white; }
    
    .ResponsiveDesign .Diary .DiaryItemContainer,
    .ResponsiveDesign .Diary .DiaryCommentListItemContainer,
    .ResponsiveDesign .Guestbook .GuestbookList .GuestbookListItemContainer,
    .ResponsiveDesign .FileArea .FunctionTable .FileListContainer,
    .ResponsiveDesign .Contact .FunctionTable .RightColumn .ImageContainer { 
        width: auto;
        margin: 0;
		margin-bottom: 15px; 
        padding: 10px;
        background: none;
        background-color: #272727; 
        border: 1px solid #474747; 
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }
    .ResponsiveDesign .Diary .DiaryItemContainer div, 
    .ResponsiveDesign .Diary .DiaryCommentListItemContainer div,
    .ResponsiveDesign .Guestbook .GuestbookList .GuestbookListItemContainer div,
    .ResponsiveDesign .FileArea .FunctionTable .FileListContainer div,
    .ResponsiveDesign .Contact .RightColumn .ImageContainer div,
    .ResponsiveDesign .Contact .ContactFormContainer div { 
        padding: 0;
        margin: 0;
        width: auto;
        height: auto;
        background: none;
     }
    
    .ResponsiveDesign .Diary .DiaryCommentListItemContainer,
    .ResponsiveDesign .Guestbook .GuestbookList .GuestbookListItemContainer,
    .ResponsiveDesign .FileArea .FunctionTable .FileListContainer,
    .ResponsiveDesign .Contact .RightColumn .ImageContainer { margin-bottom: 15px; }
    

    .ResponsiveDesign .Contact .RightColumn { width: auto; margin: 15px 0; }
    .ResponsiveDesign .Contact .RightColumn .ParagraphContainer { width: auto; padding: 0 10px; }
    .LayoutPage .Contact,
    .LayoutPage .Contact .ContactForm,
	.ResponsiveDesign .Contact .ContactFormContainer { 
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
    }

	.LayoutPage .Contact .ContactForm { padding-bottom: 1em !important; }
	.LayoutPage .Contact::before,
	.LayoutPage .Contact::after { display: none !important; }
	.LayoutPage .Contact .ContactForm input.ContactSubmit { float: none !important; }

    
    .ResponsiveDesign .ImageGallery .ImageContainer { 
        width: auto;
        margin: 0;
        padding: 10px;
        background: none;
        background-color: #272727; 
        border: 1px solid #474747; 
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }
    .ResponsiveDesign .ImageGallery .ImageContainer div {
        padding: 0;
        margin: 0;
        width: auto;
        height: auto;
        background: none;
     }
    .ResponsiveDesign .ImageGallery .Gallery1 .GalleryCell { width: 140px; margin: 5px; }
    .ResponsiveDesign .ImageGallery .Gallery1 .GalleryCell .ImageContainer { width: auto; margin: 0; }


    .ResponsiveDesign div.Gallery2 .ParagraphContainer,
    .ResponsiveDesign div.Gallery3 .ParagraphContainer,
    .ResponsiveDesign div.Gallery4 .ParagraphContainer,
    .ResponsiveDesign div.Gallery5 .ParagraphContainer { padding-top: 0; }

    .ResponsiveDesign .ImageGallery .Gallery2 .GalleryTextCell { margin-left: 130px; }
    .ResponsiveDesign .ImageGallery .Gallery3 .GalleryTextCell { margin-left: 60px; }

    .ResponsiveDesign .ImageGallery .Gallery4 .GalleryImageCell { width: 140px; margin-bottom: 10px; }

    .ResponsiveDesign .ImageGallery .Gallery5 .GalleryImageCell { width: 70px; margin-bottom: 10px; }

    .ResponsiveDesign .ImageGallery .Gallery6 .GalleryCell { width: auto; height: auto; margin: 0; padding: 0; }
    .ResponsiveDesign .ImageGallery .Gallery6 .GalleryCell .ImageContainer { width: 80px !important; height: auto !important; margin: 0; padding: 5px; margin: 2px; }
    .ResponsiveDesign .ImageGallery .Gallery6 .ImageContainer .ImageContainerMiddle img { margin: 0; width: auto; max-width: initial; }
    .ResponsiveDesign .ImageGallery .Gallery6 .ImageContainer .ImageContainerMiddle { height: auto !important; overflow:hidden; }

    .ResponsiveDesign .ImageGallery .Gallery7 .ImageContainer .ImageContainerMiddle img { margin: 0; width: auto; max-width: initial; }

    .ResponsiveDesign .ImageGallery .Gallery7 .ImageContainer,
    .ResponsiveDesign .ImageGallery .Slide1 .ImageContainer,
    .ResponsiveDesign .ImageGallery .Slide2 .ImageContainer,
    .ResponsiveDesign .ImageGallery .Slide3 .ImageContainer { 
        width: auto;
        margin: 0;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
    }
    .ResponsiveDesign .ImageGallery .Gallery7 .ImageContainer { margin: 3px; }
    .ResponsiveDesign .ImageGallery .Gallery7 .ImageContainer div,
    .ResponsiveDesign .ImageGallery .Slide1 .ImageContainer div,
    .ResponsiveDesign .ImageGallery .Slide2 .ImageContainer div,
    .ResponsiveDesign .ImageGallery .Slide3 .ImageContainer div { 
        padding: 0;
        margin: 0;
        width: auto;
        height: auto;
        background: none;
     }
}