/*------------------------------------*\
    GENERAL
\*------------------------------------*/

html {
	width: 100%;
	height: 100%;
}

body{
	margin: 0;
}
.PageContainer *,
.PageContainer *:after,
.PageContainer *:before {
	-webkit-font-smoothing:antialiased;
    font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
img{ 
    max-width:100%; 
    height:auto; 
    border: 0 none; 
}


/*------------------------------------*\
    HEADER ON OTHER PAGES THEN START
\*------------------------------------*/

.HeaderContainer{
    height: 72px;
    background-color: rgb(0, 0, 0);
    position: fixed !important;
    top: 0;
    z-index: 1000;
    width: 100% !important;
}
.HeaderContainer h1{
    color: white;
}
.LogoContainer {
	display: none;
}

.IndexPage .LogoContainer {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 10;
	background-color: white;
}

.IndexPage .LogoContainer img {
	position: absolute;
	left: 50%;
	top: 0;
	min-height: 100%;
	min-width: 100%;
	max-width: none;
	-webkit-transform: translate(-50%,0);
	    -ms-transform: translate(-50%,0);
	        transform: translate(-50%,0);
}


.HeaderContainerMiddle, .HeaderContainerTop{
    max-width: 960px;
    margin: 0 auto;
    height: 72px;
	overflow: hidden;
}
.HeaderContainerMiddle{
    margin-top: -72px;
    padding: 0px 1.01%;
}
.HeaderContainerMiddle h1 {
    line-height: 72px;
    display: block;
    padding: 0px;
}

.menu-icon-container {
    position: relative;
	width: 100%;
    max-width: 960px;
    margin: 0px auto;
	height: 72px;
}
.menu-icon-wrap{
	height: 72px;
	width: 72px;
	background-color: rgba(0,0,0, 0.5);
    position: absolute;
	right: 0;
	top: 0;
	padding: 22px 18px;
	box-sizing: border-box;
    z-index: 1000;
}
.menu-icon {
    height: 28px;
    width: 34px;
    background-image: url('images/assets.png');
    background-size: 100px auto;
    background-position: -32px -555px;
    background-repeat: no-repeat;
    cursor: pointer;
}



/*------------------------------------*\
    HEADER ON STARTPAGE
\*------------------------------------*/

.IndexPage .HeaderContainer{
	position: absolute !important;
	width: 100%;
	z-index: 11;
    background-color: transparent;
}
.IndexPage .HeaderContainerTop{
    height: 72px;
    max-width: none !important;
    position: fixed !important;
    z-index: 1000;
    width: 100%;
}
/*
.IndexPage .HeaderContainerMiddle{
	max-width: 980px;
    margin: 0 auto;
    padding: 0px 1.01%;
}
.IndexPage .HeaderContainerMiddle h1{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    padding: 0px;
    font-size: 100px;
    color: white;
    line-height: 116px;
    text-shadow: 0px 2px 0px rgba(0,0,0,0.3);
}

*/


.IndexPage .HeaderContainerMiddle {
	position: absolute;
	top: 0;
	left: 50%;
	width: 980px;
	height: 100%;
	margin: 0;
	padding: 0;
	margin-left: -490px;
	box-sizing: border-box;
}
.IndexPage .HeaderContainerMiddle .HeadlineContainer { 
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
	max-width: 980px;
	max-height: 100%;
}

.IndexPage .HeaderContainerMiddle * {
    color: white;
    text-shadow: 0px 1px 0px rgba(0,0,0,0.3);
}

.IndexPage .HeaderContainerMiddle h1 {
    font-size: 100px;
    color: white;
    line-height: 116px;
	padding-bottom: 0.5em;
    text-shadow: 0px 2px 0px rgba(0,0,0,0.3);
}


.IndexPage .LogoContainerMiddle,
.IndexPage .LogoField,
.IndexPage .HeaderContainer {
    height: 100%;
}
.IndexPage .LogoField {
    z-index: 10;
}

.IndexPage svg {
  vertical-align: middle;
}
.IndexPage .scroll-down {
  position: absolute;
  left: 50%;
  margin-left: -20px;
  width: 40px;
  height: 40px;
  bottom: 35px;
  padding-left: 7px;
  cursor: pointer;
  z-index: 2;
  color: white;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  z-index: 100;
}
.IndexPage .scroll-down.svg svg {
  width: 25px;
  opacity: 1;
  -webkit-transition: opacity .5s;
  -moz-transition: opacity .5s;
  -ms-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s;
}
.IndexPage .scroll-down.svg .stroke {
  stroke: #fff;
}
.IndexPage .scroll-down.svg .scroller {
  fill: #fff;
  -webkit-animation: updown 1s infinite;
  -moz-animation: updown 1s infinite;
  -o-animation: updown 1s infinite;
  animation: updown 1s infinite;
}

@-webkit-keyframes updown {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    50% {
        -webkit-transform: translate(0, 5px);
        transform: translate(0, 5px)
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}
@-moz-keyframes updown {
    0% {
        -moz-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    50% {
        -moz-transform: translate(0, 5px);
        transform: translate(0, 5px)
    }
    100% {
        -moz-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}
@-o-keyframes updown {
    0% {
        -o-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    50% {
        -o-transform: translate(0, 5px);
        transform: translate(0, 5px)
    }
    100% {
        -o-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}
@keyframes updown {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    50% {
        -webkit-transform: translate(0, 5px);
        transform: translate(0, 5px)
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}




/*------------------------------------*\
    MENU
\*------------------------------------*/

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0 , 0, 0.75);
    z-index: 10010;
}
.MenuContainer * {
	box-sizing: border-box;
}
.MenuContainer {
	position: fixed;
	top: 0px;
	width: 96.875%;
	margin: 20px 1.5625%;
	background-color: #f3f3f3;
	padding: 86px 10.9375% 103px;
    z-index: 10020;
    overflow-y: auto;
    max-height: 100%;
	box-sizing: border-box;
}
.close-menu-icon{
    display: none;
    background-image: url('images/assets.png');
    background-size: 100px auto;
    background-position: -33px -192px;
    width: 28px;
    height: 28px;
    position: absolute;
    top: 23px;
    right: 23px;
    cursor: pointer;
}
.MobileMenuContainer .Padding > ul{
	display: block !important;
    margin: 0;
    padding: 0;
    list-style-type: none;
    min-height: 0px;
}
.MenuContainer{
    display: none;
}
.MenuContainerMiddle{
    margin-bottom: 100px;
}
.MobileMenuContainer .Padding ul li a {
	text-decoration: none;
	color: black;
}

.MobileMenuContainer .Padding ul li {
	list-style: none;
}

.MobileMenuContainer .Padding > ul > li{
    position: relative;
	display: inline-block;
	width: 33.1%;
	height: 203px;
    margin: -3px -3px 0 0;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
}  
.MobileMenuContainer .Padding > ul > li:hover > a{
    color: white;
    background-color: black;
}
.MobileMenuContainer .Padding > ul > li:nth-of-type(3n+3){
    border-right: none;
    border-bottom: 1px solid #000;
}
.MobileMenuContainer .Padding > ul > li > a{
	font-family: "LustScriptDisplay",sans-serif;
    font-size: 25px;
    line-height: 1;
    position: absolute;
    padding: 59px 15% 0;
    text-align: center;
    margin: 2.5%;
    width: 95%;
    height: 92%;
}
.MobileMenuContainer .Padding > ul > li > a > .menu-line{
    content:" ";
    width: 30px;
    height: 3px;
    display: block;
    margin: 0 auto;
    margin-top: 11px;
}
.MobileMenuContainer .Padding > ul > li:hover a > .menu-line{
    width: 100%;
}
.MobileMenuContainer .Padding > ul > li > ul{
	display: none;
    position: absolute;
    width: 95%;
    margin: 2.5%;
    padding: 0 0 38px;
    top: 134px;
    background-color: black;
    z-index: 1000;
}
.MobileMenuContainer .Padding > ul > li > ul > li{
    width: auto;
    height: auto;
    width: 100%;
    padding: 9px 0 9px 0;
	color: white;
}
.MobileMenuContainer .Padding > ul > li > ul,
.MobileMenuContainer .Padding > ul > li > ul > li > ul {
	display: none;
}

.MobileMenuContainer .Padding > ul > li > ul > li:hover a{
    color: white;
}
.MobileMenuContainer .Padding > ul > li > ul > li > a{
    color: white;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 11px;
    text-transform: uppercase;
    padding: 0 15%;
    width: 100%;
    display: block;
    position: relative;
}
.MobileMenuContainer .Padding > ul > li > ul > li > ul {
    list-style-type: none;
    padding: 8px 0 0;
}
.MobileMenuContainer .Padding > ul > li > ul > li > ul > li{
    padding: 0px 0px 5px;
}
.MobileMenuContainer .Padding > ul > li > ul > li > ul > li > a{
    display: block;
    width: 100%;
    padding: 0 20%;
	color: white;
}
.MobileMenuContainer .Padding > ul > li > a > .downarrow {
    background-image: url('images/assets.png');
    background-size: 96px auto;
    background-repeat: no-repeat;
    background-position: -31.5px -90px;
    height: 27px;
    width: 27px;
    cursor: pointer;
    margin: 10px auto 0;
}
.MobileMenuContainer .Padding > ul > li:hover > a > .downarrow{
    display: none;
}
.MobileMenuContainer .Padding > ul > li > ul > li > a > .downarrow {
    background-image: url('images/assets.png');
    background-repeat: no-repeat;
    background-size: 60px auto;
    background-position: -20px -182px;
    height: 21px;
    width: 21px;
    position: absolute;
    right: 9px;
    top: -3px;
    margin-top: 0px;
}
.MobileMenuContainer .Padding > ul > li > ul > li:hover > a > .downarrow{
    display: none;
}


/*------------------------------------*\
    GENERAL CONTENT STYLES
\*------------------------------------*/

.ContentContainer { width: 980px; margin: 0 auto; z-index: 1; }
.ContentContainerMiddle { padding-bottom: 20px; }
.ResponsiveDesign .ContentContainerMiddle { padding: 0; }

.Contact, .Diary, .EmptyPage, .FileArea, .ImageGallery1, .ImageGallery2, .ImageGallery3, .ImageGallery, .Guestbook, .TextLayout1, .TextLayout2, .LayoutPage {
    max-width: 980px;
    min-width: 0 !important;
    margin: 116px auto 20px !important;
    padding: 0px 1.01%;
    position: relative;
    background-color: white;
	box-sizing: border-box;
}
.LayoutPage .Contact { margin: 0 !important; }
.ResponsiveDesign .MainPage { margin-top: 116px; }
.ResponsiveDesign .MainPage .MainContainer { padding-bottom: 20px; }
.ResponsiveDesign .MainPage .MainContainer:after {
    content: '';
    display: block;
    clear: both;
}

.IndexPage.ResponsiveDesign .MainPage,
.IndexPage.ResponsiveDesign .Contact,
.IndexPage.ResponsiveDesign .Diary,
.IndexPage.ResponsiveDesign .EmptyPage,
.IndexPage.ResponsiveDesign .FileArea,
.IndexPage.ResponsiveDesign .ImageGallery1,
.IndexPage.ResponsiveDesign .ImageGallery2,
.IndexPage.ResponsiveDesign .ImageGallery3,
.IndexPage.ResponsiveDesign .ImageGallery,
.IndexPage.ResponsiveDesign .Guestbook,
.IndexPage.ResponsiveDesign .TextLayout1,
.IndexPage.ResponsiveDesign .TextLayout2,
.IndexPage.ResponsiveDesign .LayoutPage { margin-top: 20px !important; }



.MainPageInlineContainer .ImageContainer img { max-width: 100%; }
.MainPage .ImageContainer img                { max-width: 100%; }
.TextLayout1 .ImageContainer img             { max-width: 100%; }
.TextLayout2 .ImageContainer img             { max-width: 100%; }


.ResponsiveDesign .TextLayout1 .LeftColumn {
    margin-right: 320px;
}

.ResponsiveDesign .TextLayout1 .RightColumn { 
	width: 300px; 
	padding-left: 20px;
}

.TextLayout2 .InlineImageContainer {
	float: left;
}
.TextLayout2 .InlineImageContainer .ImageContainer {
	width: 220px;
	margin: 0;
	margin-right: 5px;
	background: none;
}
.TextLayout2 .InlineImageContainer .ParagraphContainer {
	width: 220px;
	font-size: 10pt;
	background: none;
	padding-top: 20px;
}

/*------------------------------------*\
    START CONTENT STYLES
\*------------------------------------*/

.function-startpage .ContentContainer {
	max-width: 980px; 
	margin: 116px auto 0; 
}

.ResponsiveDesign .ContentContainer { max-width: none; width: auto; margin: 0; }
.ResponsiveDesign.function-startpage .ContentContainer { 
	max-width: none; 
	margin: 0;
}

.MainPageInlineContainer {
	
}
.MainPageInlineContainer .ImageContainer {
}
.MainPageInlineContainer .ImageContainer img {
}
.MainPage {
}

.ResponsiveDesign .MainPage{
    width: auto;
	max-width: none;
	min-width: 0 !important;
    padding-right: 0 !important;
    position: relative;
}
.ResponsiveDesign .MainContainer{
    float: none !important;
    max-width: 980px;
    min-width: 0 !important;
    margin: 66px auto 0 !important;
    padding: 0px 1.01% 74px;
    position: relative;
    background-color: white;
}
.ResponsiveDesign .MainPage .BodyTextContainer {
    width: 58%;
    margin-right: 32%;
}
.ResponsiveDesign .MainPageInlineContainer p {
    font-size: 13px;
    line-height: 15px;
}
.ResponsiveDesign .MainPage .GalleryPagerLinksContainer {
    height: 50px;
    padding: 14px 0 !important;
	clear: both;
}
.ResponsiveDesign .MainPage .GalleryPagerLinks { height: 50px; }
.ResponsiveDesign .MainPage .GalleryPagerLinks td { vertical-align: middle; }
.ResponsiveDesign .MainPage .GalleryPagerLinks td a { color: black; text-decoration: none; }

.ResponsiveDesign .MainPage .NewsContainer .GalleryPagerLinksContainer #pager-settings { display: none; }
.ResponsiveDesign .MainPage .NewsContainer .GalleryPagerLinksContainer #pager-settings #visible-pages { width: 3px; }
.ResponsiveDesign .MainPage .NewsContainer .GalleryPagerLinksContainer #pager-settings #rows-per-page { width: 3px; }

.ResponsiveDesign .MainPageInlineContainer{
    float: right !important;
    width: 40%;
}
.ResponsiveDesign .MainPageInlineContainer img{
    display: block;
    margin: 0 auto;
	width: auto;
	max-width: 100%;
}
.ResponsiveDesign .News-wrapper{
    background-color: #eeeeee;
    width: 100%;
    padding: 30px 0 0;
	clear: both;
}
.ResponsiveDesign .NewsContainer{
    float: none !important;
    max-width: 980px;
    margin: 0px auto !important;
    padding: 0px 1.01% 10px !important;
}
.ResponsiveDesign .MainPage.NewsHeader{
    max-width: 980px;
    margin: 0px auto !important;
}
.ResponsiveDesign .MainPage .NewsHeader .ParagraphContainer{
    position: absolute;
    top: 0px;
}
.ResponsiveDesign .NewsHeader { display: none; }
.ResponsiveDesign .NewsItem{
    width: 15%;
    text-align: center;
    margin: 20px 9% 20px;
    float: left;
}
.ResponsiveDesign .news-icon{
    background-image: url('images/assets.png');
    background-size: 100px auto;
    background-position: -37px -428px;
    width: 25px;
    height: 29px;
    margin: 0 auto 20px;
}
.ResponsiveDesign .NewsItemContent{
    margin-top: 10px;
}
.ResponsiveDesign .NewsItemContent p{
    line-height: 18px;
}


.GalleryNavigator {
	width: 150px;
	margin: 20px auto;
	padding: 10px 0;
}
.GalleryNavigator .PageNumber {
	display: inline-block;
	width: 100px;
	font-size: 16px;
	text-align: center;
}
.GalleryPagerLinks .PreviousPage, 
.GalleryPagerLinks .NextPage { padding-top: 15px; }

.GalleryNavigator span.Previous,
.GalleryNavigator a.Previous,
.GalleryPagerLinks .PreviousPage a {
    display: inline-block;
    background: url('images/assets.png') no-repeat;
    background-size: 96px auto;
    background-position: -38.5px -379px;
    width: 23px !important;
    height: 23px !important;
}
.GalleryNavigator a.Next,
.GalleryPagerLinks .NextPage a {
    display: inline-block;
	background: url('images/assets.png') no-repeat;
    background-size: 96px auto;
    background-position: -38.5px -348px;
    width: 23px !important;
    height: 23px !important;
}

.GalleryNavigator span.Previous,
.GalleryNavigator span.Next { background: none; }


.ImageGallery1 .FunctionTable {
	width: 800px;
	margin: 0 auto;
	margin-top: 20px;
	border-collapse: collapse;
}
.ImageGallery1 .FunctionTable table {
	width: 800px;
}
.ImageGallery1 .BodyTextContainer {
}
.ImageGallery1 .FunctionTable table {
	width: 100%;
}
.ImageGallery1 .FunctionTable .ImageCell {
	width: 33%;
	vertical-align: top;
	padding: 0 15px;
	box-sizing: border-box;
}
.ImageGallery1 .FunctionTable .ImageContainer {
	text-align: center;
}

.ImageGallery1 .FunctionTable .ParagraphContainerTop { padding-top: 5px; }
.ImageGallery1 .FunctionTable .ParagraphContainerBottom { padding-bottom: 5px; }

.ImageGallery2 .BodyTextContainer {
}
.ImageGallery2 .FunctionTable {
	width: 700px;
	margin: 0 auto;
	margin-top: 20px;
	border-collapse: collapse;
}
.ImageGallery2 .FunctionTable .ImageCell {
	padding-right: 5px;
	width: 160px;
	vertical-align: top;
}
.ImageGallery2 .FunctionTable .TextCell {
	vertical-align: top;
	min-height: 60px;
	_height: 60px;
}
.ImageGallery2 .FunctionTable .ImageContainer {
	text-align: center;
}

.ImageGallery3 .BodyTextContainer {
}
.ImageGallery3 .FunctionTable {
	width: 700px;
	margin: 0 auto;
	margin-top: 20px;
	border-collapse: collapse;
}
.ImageGallery3 .FunctionTable .ImageCell {
	width: 90px;
	vertical-align: top;
	padding-right: 5px;
}
.ImageGallery3 .FunctionTable .TextCell {
	width: 490px;
	vertical-align: top;
}
.ImageGallery3 .FunctionTable .ImageContainer {
	text-align: center;
	min-height: 40px;
	_height: 40px;
}
.ImageGallery3 .FunctionTable .ParagraphContainer {
	min-height: 40px;
	_height: 40px;
}

.ResponsiveDesign .ImageGallery2 .TextCell {
    margin-left: 170px;
}
.ResponsiveDesign .ImageGallery3 .TextCell {
    margin-left: 100px;
}


.FunctionTable {
    margin-top: 20px;
}

.ResponsiveDesign .TextLayout1 .RightColumn,
.ResponsiveDesign .Contact .RightColumn { width: 300px; }

.ContactFormName p,
.ContactFormEmail p,
.ContactFormField p,
.ContactFormMessage p{
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 3px !important;
}
.Guestbook .GuestbookForm input.textname,
.Guestbook .GuestbookForm textarea.textmessage,
.Contact .ContactForm input.text, 
.Contact .ContactForm textarea.textmessage {
    margin-bottom: 16px;
    width: 350px;
    border: 1px solid rgb(0, 0, 0) !important;
    padding: 10px;
    font-family: Arial, Sans-serif;
    font-weight: 300;
    font-size: 15px;
	box-sizing: border-box;
}
.Guestbook .GuestbookForm input.textname { width: 210px; }
.Guestbook .GuestbookForm textarea.textmessage { width: 210px; height: 300px; }

.Contact .ContactForm input.text { font-size: 18px; }
.Contact .ContactForm textarea.textmessage { height: 300px; width: 100%; font-size: 18px; }


.Guestbook .GuestbookForm input.GuestSubmit,
.Contact .ContactForm input.ContactSubmit, 
.Diary .DiaryCommentForm input.DiaryCommentSubmit {
    border: 0;
	color: white;
    background-color: black;
    text-transform: uppercase;
    width: 210px;
	height: 40px;
    cursor: pointer;
	box-sizing: border-box;
	font-size: 15px; 
}



.ResponsiveDesign .Guestbook .GuestbookForm { width: 230px; padding-right: 15px; }
.ResponsiveDesign .Guestbook .GuestbookList { margin-left: 245px; }

.Guestbook .GuestbookList .GuestbookListItemContainer { margin-bottom: 20px; }
.Guestbook .GuestbookList .GuestbookListItemContainer h2 { font-size: 15px; }
.Guestbook .GuestbookEntryReply { font-size: 12pt; }

.Diary .DiaryList a { font-size: 10pt; }
.Diary .CommentField a { font-size: 12pt; }
.Diary .DiaryCommentFunction {
    width: 100%;
	box-sizing: border-box;
}
.Diary .DiaryCommentForm span { font-size: 10pt !important; }
.Diary .DiaryCommentListContainer .CommentCountContainer h2 { padding-bottom: 10px; }


.FileArea .FunctionTable {
	width: 600px;
	margin: 20px auto;
}
.FileArea .FunctionTable .FileList {
	width: 600px;
	border-collapse: collapse;
}

/*------------------------------------*\
    FOOTER
\*------------------------------------*/

.FooterContainer{
	background-color: black;
    text-align: center;
    height: auto;
    padding: 15px 0;
	box-sizing: border-box;
}
.FooterContainer a, .FooterContainer p{
    color: white;
    font-size: 12px;
    padding: 0;
}
.FooterContainer .dinStudioLink a{
    text-transform: uppercase;
    font-weight: 700;
    font-size: 10px;
}

body,
body > form 
{ height: 100%; }

.PageContainer { display: table; height: 100%; width: 100%; }
.PageContainer .PageContainerTop,
.PageContainer .PageContainerMiddle,
.PageContainer .PageContainerBottom { display: table-row; }
.PageContainer .PageContainerTop,
.PageContainer .PageContainerBottom { height: 0px; width: 100%; }
.PageContainer .PageContainerMiddle { padding-bottom: 20px; }