@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;
}

#my_logo h1 {
	font-family: 'Pacifico', serif;
	font-size:1.5em;
}
#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 {
	height:100%;
	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.5% 0 0.5% 0;
	text-align: center;
	font-size:1em;
}
.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:4em;
}
#apps-left p {
	font-size:1.75em;
	font-family:'Josefin Sans', sans-serif;
	font-weight:100;
}
#apps-left h2 {
	font-family:'Futura', sans-serif;
	font-weight:100;
	font-size:2.5em;
	padding-left:10px;
}
#apps-descr {
	width:100%;
	padding-left:10px;
}
#apps-left {
	display:table-cell;
	vertical-align:middle;
	width:50%;
}
#apps-right {
	display:table-cell;
	vertical-align:middle;
	width:35%;
	padding-right:10%;
}
#iphone {
	width:100%;	
}
.clear {
	clear:both;
}
#about {
	width: 100%;
	background-color: #EFEEEC;
}
#about h2 {
	font-weight:100;
}
#wrapper-about {
	width: 80%;
	margin: 0 auto;
	padding: 5% 0 5% 0;
}
#about h1, p {
	padding-left: 10px;
}

/* box stuff */

.box {
	float: left;
	position: relative;
	width: 50%;
	padding-bottom: 50%;
}
.boxInner {
	position: absolute;
	left: 10px;
	right: 10px;
	top: 10px;
	bottom: 10px;
	overflow: hidden;
}
.boxInner img {
	width: 100%;
}
.boxInner .titleBox {
	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:0 0 1% 0;
	margin:0;
}

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

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

#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 h1 {
	font-size:2em;
}


#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%;
}

.boxInner-films .titleBox {
	visibility:hidden;
}

/* iPads (portrait) ----------- */
@media only screen and (min-width : 768px) and (max-width: 1024px) {
/* Styles */
#width-container {
	width:80%;	
	margin: 0 auto;
	height:100%;
	
	vertical-align:middle;
	display:table; 
}

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

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

#top_wrapper {
	margin: 0 0 0 0;
	height: 70%;
	background-color: grey;
}
#demo_top {
	height: 70%;
	padding: 0 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;
	padding:0;
}

.box-films {
	float: left;
	position: relative;
	width: 50%;
	padding-bottom: 30%;
}

/* film box stuff */
.boxInner-films {
	position: absolute;
	left: 10px;
	right: 10px;
	top: 10px;
	bottom: 10px;
	overflow: hidden;
}
.boxInner-films img {
	width: 100%;
}
}

/* iPads (landscape) ----------- */
@media only screen and (min-width : 601px) and (max-width: 767px) {
/* Styles */
.box-films {
	position: relative;
	width: 100%;
	margin: 5% auto;
	
}
/* film box stuff */
.boxInner-films {
	position: relative;
	overflow: hidden;
	height:100%;
	
}
.boxInner-films img {
	width: 100%;
	display: block;
}

#width-container {
	width:80%;	
	margin: 0 auto;
	z-index:1;
	height:100%;
	
	display:table-cell;
	vertical-align:middle;
}

#logo_container {
	width:100%;
}

#logo_container img {
	display : block;
	margin : auto;
}

#my_logo {
	width:80%;
	text-align: center;
	margin: 0 auto;
}

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

#top_wrapper {
	margin: 0 0 0 0;
	height: 80%;
}
#demo_top {
	height: 80%;
	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')";
}

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

@media only screen and (min-device-width : 601px) and (max-device-width: 1024px) {
#demo_top {
	display:table;
}
}