@charset "utf-8";

img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width: 100%;
}


/* ---------Fluid Styles--------- */
.fluid {
	clear: both;
	margin-left: 0;
	width: 100%;
	float: left;
	display: block; 
}
.fluidList {
	list-style: none;
	list-style-image: none;
	margin: 0;
	padding: 0;
}



/* --------------------------------------------------
	Mobile Layout: 480px and below.
----------------------------------------------------- */  
#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 120%;
  top: 0px;
  left: 0px;
  background: #000;
  z-index: 1;
}

#loading {
  display: none;
  position: fixed;
  top: 40%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #fff;
  z-index: 2;
}

.background {
	z-index                 : -1;
    background-color        : rgba(0,0,0,1.00);
    background-image        : url('img/bg-s.jpg');
    background-repeat       : no-repeat;
    background-size         : cover;
	background-position: center center;
    position                : fixed;
    top                     : 0;
    left                    : 0;
    right                   : 0;
    bottom                  : 0;
}

.subtitle {
	margin-bottom:0px;
	font-size:40px;
	text-align: center; 
}

.underline {
	width:40%;
	height:9px;
	background:#fff;
	margin:0px 30%;
	margin-bottom:20px;
}

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 86.45%;
	padding-left: 2.275%;
	padding-right: 2.275%;
	clear: none;
	float: none; 
}

/* ---------Header styles--------- */
.heroHeader {
}

.logo {
	width: 50%; 
	float: none;
	margin: auto;
}

/* Navigation Bar styles */
.topNav {
	float: none;
	width: 80%;
	margin: auto;
	clear: both;
}

.topNavUl {
	position: static;
	width: 100%;
	margin-left: 0;
	padding-top: 2%;
    padding-bottom: 2%; 
}

.topNavLI {
	width: 23%;
	margin-left: 2%;
	clear: none;
	height: auto;
	position: static;
	text-align: center;
}

.main {
}

.outline {
	margin-bottom:0px;
	font-size: 14px;
	letter-spacing: 0.2em;
	line-height: 1.5;
	margin-left: 5%;
	margin-right: 5%; 
}


/* ---------gallery styles--------- */
.gallery {
}

.tiles {
	width: 22.5%;
	height: 22.5%;
	clear: none;
	margin-left: 2%;
	margin-bottom: 2%;
	display: block;
    padding-bottom: 0%; 
}

.tiles:hover {
	opacity: 0.6;
    cursor: pointer; 
}

/* ---------instagram feeds styles--------- */
#instafeed {
  position: relative;
  width: 100%;
}
#instafeed a {
  display: block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.cell:hover {
	opacity: 0.6;
    cursor: pointer; 
}



/* ---------Text areas styles--------- */
.linkStyle {
	font-size: 12px;
}

.textContainer {
    padding-top:20px;
    padding-bottom:60px;
	margin-top: 20px;
	margin-bottom: 20px;
}

.about {
	margin-top:0px;
	margin-bottom:0px;
	font-size: 20px;
	letter-spacing: 0.2em;
	line-height: 1.5;
	margin-left: 0%;
	margin-right: 0%; 
}

.staff, .staff-ctg {
	margin-top:0px;
	margin-bottom:0px;
	font-size: 20px;
	letter-spacing: 0.2em;
	line-height: 1.5;
	margin-left: 0%;
	margin-right: 0%; 
}

.archive {
	margin-top:0px;
	margin-bottom:0px;
	font-size: 40px;
	letter-spacing: 0.4em; 
	line-height: 1.5;
	margin-left: 13%;
	margin-right: 10%; 
}

.paraContent, .copyright{
	font-size: 14px;
	letter-spacing: 0.2em;
	line-height: 1.5;
	margin-left: 0%;
	margin-right: 0%; 
}



/* ---------Footer styles--------- */
.footer {
}


/* --------------------------------------------------
	Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout.
----------------------------------------------------- */  
@media only screen and (min-width: 769px) {
#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #000;
  z-index: 1;
}

#loading {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #fff;
  z-index: 2;
}

  .background {
    z-index                 : -1;
    background-color        : rgba(0,0,0,1.00);
    background-image        : url('img/bg.jpg');
    background-repeat       : no-repeat;
	background-size         : cover;
	background-position: center center;
    position                : fixed;
    top                     : 0;
    left                    : 0;
    right                   : 0;
    bottom                  : 0;
  }

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 86.45%;
	padding-left: 2.275%;
	padding-right: 2.275%;
	clear: none;
	float: none; 
}


/* ---------header styles--------- */
.header {
}

.logo {
	width: 100%;
}

/* Navigation styles*/
.topNav {
	float: none;
	width: 60%;
	margin: auto;
	clear: both;
}

.topNavUl {
	position: static;
	width: 100%;
	margin-left: 0;
	padding-top: 2%;
    padding-bottom: 2%; 

}

.topNavLI {
	width: 23%;
	margin-left: 2%;
	clear: none;
	height: auto;
	position: static;
	text-align: center; 
}

.main {
	width: 80%;
	margin-left:10%;
}

.outline {
	margin-bottom:0px;
	font-size: 20px;
	letter-spacing: 0.2em;
	line-height: 1.5;
	margin-left: 5%;
	margin-right: 5%; 
}


/* ---------subtitle styles--------- */
.subtitle {
	margin-bottom:0px;
	font-size:80px;
}

.underline {
	width:24%;
	height:9px;
	background:#fff;
	margin:0px 38%;
	margin-bottom:20px;
}

/* ---------Gallery styles--------- */
.gallery {
	margin-top: 0px; 
	margin-bottom: 80px;
}

.tiles {
	width: 12%;
	height: 12%;
	clear: none;
	margin-left: 2%;
	margin-bottom: 2%;
	display: block;
    padding-bottom: 0%; 
}

.tiles:hover {
	opacity: 0.6;
    cursor: pointer; 
}

/* ---------instagram feeds styles--------- */
#instafeed {
  position: relative;
  width: 100%;
}
#instafeed a {
  display: block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
}

.cell:hover {
	opacity: 0.6;
    cursor: pointer; 
}


/* ---------Text area styles--------- */
.linkStyle {
	font-size: 16px;
}

.textContainer {
    padding-top:20px;
    padding-bottom:80px;
	margin-top: 20px;
	margin-bottom: 20px;
}

.about {
	margin-top:0px;
	margin-bottom:0px;
	font-size: 40px;
	letter-spacing: 0.2em;
	line-height: 1.5;
	margin-left: 10%;
	margin-right: 10%; 
}

.staff, .staff-ctg {
	margin-top:0px;
	margin-bottom:0px;
	font-size: 40px;
	letter-spacing: 0.2em;
	line-height: 1.5;
	margin-left: 10%;
	margin-right: 10%; 
}

.archive {
	margin-top:0px;
	margin-bottom:0px;
	font-size: 70px;
	letter-spacing: 0.4em;
	line-height: 1.5;
	margin-left: 12%;
	margin-right: 10%; 
	text-align: center;
}

.paraContent, .copyright{
	font-size: 20px;
	letter-spacing: 0.2em;
	line-height: 1.5;
	margin-left: 5%;
	margin-right: 5%; 
}


/* ---------Footer styles--------- */
.footer {
}
}



/* google map responsive */
/* http://inthecom.net/?p=718 */
.ggmap {
position: relative; 
padding-bottom: 50%;
padding-top: 30px;
height: 0;
overflow: hidden;
width: 100%;
}

.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 10%; 
width: 80%;
height: 100%;
}

.yt {
position: relative; 
padding-bottom: 50%;
padding-top: 30px;
height: 0;
overflow: hidden;
width: 100%;
}

.yt iframe,
.yt object,
.yt embed {
position: absolute;
top: 0;
left: 10%; 
width: 80%;
height: 100%;
}