@charset "UTF-8";
/* CSS Document */

html, body {
	font-family: "Futura", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}
#top_wrapper {
	margin: 0 0 0 0;
	height: 70%;
	background-color: grey;
}
#demo_top {
	height: 70%;
	padding: 20px 0 0 0;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	color: white;
	
	z-index: 1;
	position: fixed;
	
	background-repeat: no-repeat;
	background-size: 100%;
	-webkit-background-size: 100%;
	-moz-background-size: 100%;
	background-position: center center;
	
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='background-images/lake.jpg',sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='background-images/lake.jpg',sizingMethod='scale')";

}

#logo {
	width: 80%;
	margin: 0 auto;	
}

#about-logo {
	width: 80%;
	margin: 0 auto;	
}

#width-container {
	width:80%;	
	margin: 0 auto;
	height:100%;
	
	display:table; 
}

#logo_container {
	width:20%;
	display: table-cell;
   text-align: center;
   vertical-align: middle;
}

#my_logo {
	width:80%;
	text-align: center;
	margin: 0 auto;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	
	text-transform:lowercase;
}

#my_logo h1 {
	font-family: 'Pacifico', serif;
}
#my_logo p {
	font-family: 'Josefin Sans', sans-serif;
	font-size: 150%;
	font-weight: 600;
}
#my_logo a {
	color: #FCE54A;
}

/* our menu styles */
#sticky_navigation_wrapper {
	width: 100%;
	height: 50px;
	position: relative;
	top: 100%;
}
/*
#sticky_navigation {
	width:100%; 
	height:50px;
	background:url(trans-black-60.png); 
	-moz-box-shadow: 0 0 5px #999; 
	-webkit-box-shadow: 0 0 5px #999; 
	box-shadow: 0 0 5px #999; 
	
	background-color:yellow;
}



#sticky_navigation ul { 
	list-style:none; margin:0; padding:5px;
	background-color:red;
	width:100%;
	
	
}

#sticky_navigation li {
	margin:0; padding:0; display:inline;
	
}

#sticky_navigation a {
	display:inline-block;
	
	margin:0 0 0 5px; 
	padding:0 20px; 
	height:40px; 
	line-height:40px; 
	font-size:14px; 
	font-family:'Futura', serif; 
	font-weight:bold; 
	color:#ddd; 
	background:#333; 
	-moz-border-radius:3px; 
	-webkit-border-radius:3px; 
	border-radius:3px; 
}

#sticky_navigation ul li a:hover, #sticky_navigation ul li a.selected { 
	color:#fff; background:#111;
}*/

.nav {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	background-color: #E7D574;
	border: 1px solid #C9AF03;
	border-width: 1px 0;
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}
.nav li {
	display: inline;
}
.nav a {
	display: inline-block;
	padding: 10px;
	text-decoration: none;
}
.nav a:visited {
	text-decoration: none;
}
.nav a:hover, .nav ul li a.selected {
	text-decoration: underline;
}
#content {
	z-index: 2;
	position: relative;
	background-color: white;
	padding: 0 0 0 0;
}
#content h1 {
	font-family: 'Josefin Sans', sans-serif;
}
.section {
	padding: 0 0 0 0;
}

/* code for sections */
#films {
	width: 100%;
	background-color:#D3363E;
}
#wrapper-films {
	overflow: hidden;
	width: 80%;
	margin: 0 auto;
	padding: 5% 0 5% 0;
}
#films h1 {
	padding-left: 10px;
	color:white;
}
#photos {
	width: 100%;
	background-color:#66C9E4;
}
#wrapper-photos {
	overflow: hidden;
	width: 80%;
	margin: 0 auto;
	padding: 5% 0 5% 0;
}
#photos h1, p {
	padding-left: 10px;
}
#apps {
	width: 100%;
	background-color:#97D2CB;
}
#wrapper-apps {
	width: 80%;
	margin: 0 auto;
	padding: 5% 0 5% 0;
	
}
#apps h1, p {
	padding-left: 10px;
}
#apps-left h1 {
	font-size:6em;
}
#apps-left p {
	font-size:2em;
	font-family:'Josefin Sans', sans-serif;
	font-weight:100;
}
#apps-left h2 {
	font-size:3em;
	padding-left:10px;
}
#apps-descr {
	width:80%;
	padding-left:10px;
}
#apps-left {
	float:left;
	width:60%;
	padding-right:10%;
}
#apps-right {
	float:right;
	width:30%;
}
.clear {
	clear:both;
}
#about {
	width: 100%;
	background-color: #EFEEEC;
}
#wrapper-about {
	width: 80%;
	margin: 0 auto;
	padding: 5% 0 5% 0;
}
#about h1, p {
	padding-left: 10px;
}

/* film box stuff */
.box-films {
	float: left;
	position: relative;
	width: 50%;
	padding-bottom: 30%;
}
.boxInner-films {
	position: absolute;
	left: 10px;
	right: 10px;
	top: 10px;
	bottom: 10px;
	overflow: hidden;
}
.boxInner-films img {
	width: 100%;
}
.boxInner-films .titleBox {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin-bottom: -50px;
	background: #000;
	background: rgba(0, 0, 0, 0.5);
	color: #FFF;
	padding: 10px;
	text-align: center;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	visibility:hidden;
}

/* box stuff */

.box {
	float: left;
	position: relative;
	width: 20%;
	padding-bottom: 20%;
}
.boxInner {
	position: absolute;
	left: 10px;
	right: 10px;
	top: 10px;
	bottom: 10px;
	overflow: hidden;
}
.boxInner img {
	width: 100%;
}
.boxInner .titleBox {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin-bottom: -50px;
	background: #000;
	background: rgba(0, 0, 0, 0.5);
	color: #FFF;
	padding: 10px;
	text-align: center;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	visibility:hidden;
}

/* about stuff */
#banner {
	width:100%;
	padding: 10px;
}

#banner-left {
	width:30%;
	display:table-cell;
	vertical-align:middle;
}

#banner-right {
	width:70%;
	display:table-cell;
	vertical-align:middle;
}

#banner h1 {
	font-size:3em;	
	padding:5% 0 2% 0;
	margin:0;
}

#banner h2 {
	font-size:2em;	
	padding:0 0 2% 0;
	margin:0;
}

#banner p {
	font-size:1em;	
	padding:0 0 0 0;
	margin:0;
	line-height:200%;
}

#info {
	margin:1%;	
	width:100%;
	background-color: #EFEEEC;
}

#about-left {
	float:left;
	width:47%;
	padding:0 3% 0 0;
}

#info h1 {
	padding-top:0.5em;
}

#about-right h3 {
	padding:0.5em 0 0.2em 0;
	margin:0;
	font-weight:bold;
}

#about-right p {
}	

#info h1, h2, h3, p {
	padding-left:0;
	margin-left:0;
}

#about-right {
	float:right;
	width:47%;
	padding:0 0 0 3%;
}

.first {
	font-weight:bold;
	margin:0;
	padding:0 0 0.2em 0;
}

.second {
	margin:0;
	padding:0 0 0 0;
	font-weight:100;
}

.third {
	margin:0;
	padding:0 0 0 0;
	font-style:italic;
	font-size:0.75em;
}

#name {
	height: 100%; 
	margin: 0 auto; 
}

#name a {
	color:	#5B6AAD;
}

#name-left {
	float:left;
	width:60%;
}

#name-right:before, #icons { 
  /* these are the important styles for the centered element: */ 
  display: inline-block; 
  vertical-align: middle; 
} 

#name-right:before { 
  /* this is the important part */ 
  content: ''; 
  display: inline-block; 
  width: 0; 
  height: 100%; 
  vertical-align: middle; 
  /* this just takes care of whitespace added by having display:inline-block (there are other methods) */ 
  margin-left: -0.25em; 
} 

#name-right {
	float:right;
	width:40%;
	height:100%;
}

#icons {
	width:100%;
}

.icon {
	width:20%;
}