/* RONIT Style */

@import url(https://fonts.googleapis.com/css?family=Cabin);
@import url(https://fonts.googleapis.com/css?family=Francois+One);

@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url(https://fonts.googleapis.com/css?family=Great+Vibes);

#LogoDiv	{ 	width:200px; display:block; float:left; margin-top:0;  }

#studio		{ 	font-family: 'Pacifico', cursive; 
				font-size:2.2em; 
				line-height:1em; 
				/*text-shadow: 1px 1px 1px #ccc; */
				color:#666; 
				font-weight:300; 
				margin:0 0 -0.1em .3em;
				width:auto;
					
				}
				
#thirty		{ font-family: 'Great Vibes', cursive; font-size:2.5em; /*text-shadow: 1px 1px 1px #ccc;*/ color:#666; padding:0 0 0 1em; width:auto;	}
#six		{ font-family: 'Great Vibes', cursive; font-size:6em; /*text-shadow: 1px 1px 1px #ccc;*/ color:#666; margin:0 0 -1.1em 1.1em; width:auto; }		



#ContactPageDiv { width:100%; 
			height:100vh; 
			background: rgb(0, 0, 0); /* The Fallback */
			background: rgba(0, 0, 0, 0.90);
			position:fixed;
			margin:0;
			padding:0;
			z-index: 1000;
			display:none;
			}
		




#ContactPageDiv ul { padding:0; margin:auto; width:50%; border:solid 1px #333; position: relative; top: 50%; transform: translateY(-50%); background: rgb(0, 0, 0); /* The Fallback */ background: rgba(0, 0, 0, 0.5); }
			
#ContactPageDiv li { list-style-type:none; color:#FC9; text-align:center; line-height:2em; font-size:1.3em; font-family: 'Cabin', sans-serif; font-weight:300; border-bottom:solid 1px #333; padding:2em; }

#ContactPageDiv li a { color:#FC9; }
#ContactPageDiv li a:hover { color:#FFF; }

#ContactPageDiv i { color:#FC9; }
#ContactPageDiv i:hover { color:#FFF; }

.shadow { -webkit-box-shadow: 0 4px 6px -6px black; -moz-box-shadow: 	0 4px 6px -6px black; box-shadow: 		0 4px 6px -6px black; }
		
#CloseButton { color:#FC9; font-size:2em; font-weight:300; position:relative; float:right; margin:1.4em 2.2em 0 0; padding:0 0 -5em 0; cursor:pointer; }























body { background-color: #FFFFFF; }

.NavigationPanel { 
				width:22%; 
				height:100vh; 
				float:left; 
				color:#FFF; 
				position:fixed; 
				line-height:1.5em; 
				/*font-family: 'Abel', sans-serif;*/
				font-family: 'Lato', sans-serif;
				font-weight:300;
				padding:30px 2em 0 2em;
				}
						
#Navigation { list-style-type:none; margin:0; padding:0; }
#Navigation li { list-style-type:none; }
#Navigation li a { font-size:.9em !important; text-decoration:none; text-transform:uppercase; }
.Active { color:#000 !important; }
#Navigation li a::before { content:'-'; padding-right:1em; }
.line { width:100%; border-top:solid 1px #CCCCCC; margin:2em 0 .5em 0; }

.logo{ width:100%; text-align:center;}
.ContentPanel { display:block; width:74%; float:right; border:solid 1px #CCCCCC; margin:3em; padding:1.5em 3em 1.5em 3em ; }
.ContentPanel p { font-family: 'Abel', sans-serif; line-height:1.5em; }
.ContentPanel h1 { font-family: 'Abel', sans-serif; font-size:1.5em;}
.ContentPanel img { margin :1.5em 0 1.5em 3em ; float:right; }

.ContentPanelcontact { display:block; width:74%; float:right; border:solid 1px #CCCCCC; margin:3em; padding:1.5em 3em 1.5em 3em ; }
.ContentPanelcontact p { font-family: 'Abel', sans-serif; line-height:1.5em; padding:10em 0 2em 0; }
.ContentPanelcontact h1 { font-family: 'Abel', sans-serif; font-size:1.5em;}

.ContentPanelVideo { display:block; width:74%; float:right; border:solid 1px #CCCCCC; margin:3em; padding:1.5em 3em 1.5em 3em ; }
.ContentPanelVideo p { font-family: 'Abel', sans-serif; line-height:1.5em; padding:0em 10em 0em 11em; }
.ContentPanelVideo h1 { font-family: 'Abel', sans-serif; font-size:1.5em; padding-bottom:1em}

.GalleryPanel { display:table; width:97%; margin:auto; }

#DesktopHeader { width:97%; display:block; position:relative; clear:both; margin:auto; }
#DesktopLogo { width:auto; display:block; float:left; font-family: 'Francois One', sans-serif; font-size:2em; text-transform:uppercase; }
#DesktopMenu { float:left; list-style:none; margin:0 1em 0 0; padding:0; }
#DesktopMenu > li { float:left; margin:.7em; padding:0; font-family: 'Cabin', sans-serif; font-size:1em; text-transform:uppercase; }

/*#DesktopMenu::after { content:"|"; margin:.7em; }*/

.icons { color:#999 !important;  display:block; float:right; margin-top: 2em; }
.icons i { margin:.3em; border:solid 1px #999999; padding:.5em; background-color:#f7f7f7; }

.photo { position:relative; display:inline-block;}

.overlay  {display:none;}
.photo:hover .overlay   {
	width:100%; 
	height:100%;
	background:rgba(0,0,0,.8);
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	display :inline-block;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	text-align:center;
	color:white;
	}
.Name { width:100%; color:#fff; text-align:right; font-size:1em; /*padding:.5em;*/ background:rgba(0,0,0,.5); z-index:1; position:absolute; display:inline-block; margin-top:-2.2em; font-family: 'Cabin', sans-serif; text-transform:uppercase; }

#TopHeader { display:none; }
#container { display:none; }

	
@media screen and (max-width:600px) 

{
	
#DesktopHeader { display:none; }	
	
#LogoDiv	{ 	width:200px; display:block; float:left; margin-top:0;  }

#studio		{ 	font-family: 'Pacifico', cursive; 
				font-size:1.8em; 
				line-height:1em; 
				/*text-shadow: 1px 1px 1px #ccc; */
				color:#666; 
				font-weight:300; 
				margin:0 0 -0.1em .3em;
				width:auto;
					
				}
				
#thirty		{ font-family: 'Great Vibes', cursive; font-size:2em; /*text-shadow: 1px 1px 1px #ccc;*/ color:#666; padding:0 0 0 1em; width:auto;	}
#six		{ font-family: 'Great Vibes', cursive; font-size:4.8em; /*text-shadow: 1px 1px 1px #ccc;*/ color:#666; margin:0 0 -1.1em 1.1em; width:auto; }		


			
.NavigationPanel { display:none; }
.Active { color:#000 !important; }
.line { width:100%; border-top:solid 1px #CCCCCC; margin:2em 0 .5em 0; display:none;}
.icons { color:#999 !important; display:none;}
.icons i { margin:.5em; display:none;}

.Contact-Icons { display:block color:#999 !important; }
.Contact-Icons i { margin:.5em; display:block; float:left; }

.ContentPanel { display:block; width:100%; box-sizing:border-box; border:solid 1px #CCCCCC; margin:auto; text-align:center; margin:0; padding:1.5em; }
.ContentPanel img { text-align:center; margin:auto; float:none; }

.ContentPanelcontact { display:block; width:100%; float:right; border:solid 1px #CCCCCC; margin:0em; padding:1.5em; }
.ContentPanelcontact p { font-family: 'Abel', sans-serif; line-height:1.5em; padding:2em 0 2em 0; }
.ContentPanelcontact h1 { font-family: 'Abel', sans-serif; font-size:1.5em;}

.ContentPanelVideo { display:block; width:100%; border:solid 1px #CCCCCC; margin:0em; padding:1em ; text-align:center; }
.ContentPanelVideo p { font-family: 'Abel', sans-serif; line-height:1.5em; padding:1em; }
.ContentPanelVideo h1 { font-family: 'Abel', sans-serif; font-size:1.5em; padding-bottom:1em; }
.video { width:100%; height:auto; }	
	

.GalleryPanel { display:block; width:100%; margin:0; }
		
/* Mobile menu Starts Here */

#TopHeader {display:block; margin:.5em; width:auto; }
.MobileMenuButton{right:0; display:inline-block; width:40%; text-align:right; float:right; margin:1.7em; }

.Mobilelogo{ width:150px; display:inline-block;}


#container{background-color:#000; color: #FFF; text-align:center; font-family:Helvetica, Arial, sans-serif; /*margin-top:2.5em;*/ }
#container ul { list-style:none;  margin:0; padding:0;}

.main { /*text-transform:uppercase !important;*/ border-top:solid 1px #333333; padding:1em 0 1em 0; margin:0; }

.active{color:#CC0 !important;}



















#ContactPageDiv { width:100%; 
			height:100vh; 
			background: rgb(0, 0, 0); /* The Fallback */
			background: rgba(0, 0, 0, 0.90);
			position:fixed;
			margin:0;
			padding:0;
			z-index: 1000;
			display:none;
			}

#ContactPageDiv ul { padding:0; margin:auto; width:80%; border:solid 1px #333; position: relative; top: 50%; transform: translateY(-50%); background: rgb(0, 0, 0); /* The Fallback */ background: rgba(0, 0, 0, 0.5); }
			
#ContactPageDiv li { list-style-type:none; color:#FC9; text-align:center; line-height:2em; font-size:1em; font-family: 'Cabin', sans-serif; font-weight:300; border-bottom:solid 1px #333; padding:2em; }

#ContactPageDiv li a { color:#FC9; }
#ContactPageDiv li a:hover { color:#FFF; }

#ContactPageDiv i { color:#FC9; }
#ContactPageDiv i:hover { color:#FFF; }

.shadow { -webkit-box-shadow: 0 4px 6px -6px black; -moz-box-shadow: 	0 4px 6px -6px black; box-shadow: 		0 4px 6px -6px black; }
		
#CloseButton { color:#FC9; font-size:2em; font-weight:300; position:relative; float:right; margin:1.4em 2em 0 0; padding:0 0 -5em 0; cursor:pointer; }

	  
}