/* CSS Document */
body {
    background-image: url("../img/bg.png");
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300;
}
#main {
	background:#1a1a1a;
	margin-top:5%;
}
.page_header {
	text-transform:uppercase;
	color:#bd8dc7;
	font-weight:800;
}
.contactbutton {
	background:#bd8dc7;
	color:#000;
}
p, label {
	color:rgba(255, 255, 255, 0.61);
    line-height: 1.7em;
}
/* centered columns styles */
.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
	margin-left:34px;
    margin-right:34px;
	vertical-align:top;
}
.col-max {
    /* custom max width */
    max-width:455px;
}
.projectrole {
	color:#bd8dc7;
	font-weight:800;
}
.testimonial {
	color:#bd8dc7;
}
/*.footer div > ul > li > a {
	color:#FFF;
}
*/
ul.left_menu > li > a {
	text-align:left;
	font-size:1.1em;
	font-weight:500;
	color:rgba(255, 255, 255, 0.61);
	padding-left:4px;
}
ul.left_menu li + li::before {
    content: " | ";
}
ul.right_menu li + li::before {
    content: " | ";
}
ul.right_menu {
	text-align:right;
}
ul.right_menu > li > a {
	text-align:right;
	color:#bd8dc7;
	padding-left:4px;
}
ul.left_menu > li > a.menuactive {
	font-weight:700;
	color:#FFF;
}
ul.right_menu > li > a.menuactive {
	color:#FFF;
	font-weight:700;
}
hr {
	display: block;
	height: 1px;
	margin: 1em 0;
	padding: 0;
	border-top: 1px solid #F6C;
}
#main ul > li {
	list-style-type:none;
	color:rgba(255, 255, 255, 0.61);
	text-align:left;
}

.screen {
	/*background-color: rgba(0,0,0,0.5);*/
/*	left: 15px;
	top: 0;
	border-radius: 0;
	height: 100%;
	width: 1024px;
	position: absolute;
	opacity: 0;
	z-index: 1000;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;*/
}

#home-logo {
  width: 1024px;
  display: block;
  margin: auto;
  margin-top:220px;
  max-width:95%;
  height:auto;
   -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
}

#home-logo-link {
color: #bc8ac7; margin: 20px auto; width: 435px; display: block; font-size:38px; opacity:0;
 -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out; font-weight:900;
}

.screen:hover {
  opacity: 1
}
.title {
  color: #fff;
  font-family: arial, helvetica, sans-serif;
  font-weight: bold;
  -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
		  text-align:center;
		  position:relative;
		  top:85%;
		  font-size: 2em;
  padding: 5%;
}

.screen.fade-in .title {
  margin-left: 0;
}
.screen.fade-in:hover {
}


.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
a.homepageenter {
	color:#bd8dc7;
	font-size:36px;
	font-weight:300;
	letter-spacing:0.3em;
	text-decoration:none;
}
.homepageenterbox {
	margin-top:20px;
	text-align:center;
}
.homepage {
	padding-top:30px;
}
/** GALLERY **/

/* Grid */
 
#posts { margin: 30px auto 0; }
.post {
	margin: 0 0 50px;
	text-align: center;
	width: 100%;
}
.post img { padding: 0 15px; width: 100%; }
 
#grid.container .post img { padding: 0; }
 
 
/* Medium devices */
 
@media (min-width: 768px) {
	#grid > #posts .post { width: 335px; }
	#grid > #posts .post.cs2 { width: 100%; }
	.post img { padding: 0; }
}
 
 
 
/* Medium devices */
 
@media (min-width: 992px) {
	#grid > #posts .post { width: 445px; }
	#grid > #posts .post.cs2 { width: 100%; }
}
 
 
 
/* Large devices */
 
@media (min-width: 1200px) {
	#grid > #posts .post { width: 346px; }
	#grid > #posts .post.cs2 { width: 742px; }
}
 
 
 
/* Large devices min-width (1200px) + a .post margin (50px) * 2 (100px) = 1300px */
/* 1300px gives me the clearance I need to keep the margins of the entire #grid (the
bleed if you will) the same width as the .post margins posts (50px). Basically I'm
being really picky about whitespace. If you don't care, no problem, just delete this.
Can this be done with Masonry options? */
 
@media (min-width: 1300px) {
#grid {
	left: -50px;
	padding-left: 50px;
	padding-right: 50px;
	position: relative;
	}
#grid.gallerycontainer {
	left: auto;
	padding-left: 15px;
	padding-right: 15px;
}
}
.email_link {
	color: #FFF;
}
a:hover {
	color: #FFF;
}


.item.small {
  width: 225px;
}
.item.medium {
  width: 614px;
}
.item.large {
  width: 430px;
}
.item { 
  margin: 9px 9px;
  height: 444px;
}

.itemcontent {
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 2;
}
.itemcontent > div, .item > p {
  margin: 15px;
}
.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -ms-transition-property: -ms-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  transition-property: transform, opacity;
  transition-duration: 0.8s;
}
.itemcontent.low {
  bottom: 0;
  margin: 0;
  position: absolute;
  top: auto;
  width: 100%;
  height: 230px;
}
.item p, .item a {
  color: #8A94A4;
  text-align:left;
  text-decoration:none;
  font-weight:bold;
}
.item .low {
	background-color:rgb(45, 45, 53);
	font-size:16px;
	
}


.item.large .itemcontent div {
  background: rgba(0,0,0,0.5);
  color: white;
  padding: 10px;
}
.item:hover {
	opacity:0.4;
	filter:alpha(opacity=40); 
}


p.itemtitle {
	color: rgb(246, 246, 246);
	text-align:left;
}
.medium p, .large p {
  font-size: 25px;
  line-height: 30px;
}
.small p {
  font-size: 20px;
  line-height: 25px;
}
#gal1 {
	height: 2600px;
}