/* Global Box Sizing and Font-Smoothing */	 
*, *:after, *:before {
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-font-smoothing:antialiased;
	-o-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

html {
  scroll-behavior: smooth;
}

body {
	font-family:"Hind", Helvetica, Arial, sans-serif;
	font-size:11px;
	font-weight:300;
	line-height:18px;
	color:#444;
	margin:0px;
	background-color:#171717;
	background-image:url('images/background.jpg');
	background-repeat:no-repeat;
	background-position: top center;
	background-size: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.storyslice b { 
  font-weight: 500;
  color:#FFFFFF
}

.storysliceRight b { 
  font-weight: 500;
  color:#FFFFFF
}

.infoBox b { 
  font-weight: 700;
  color:#FFFFFF
}

.main {
	width:960px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	padding-top:100px;
}

.innerheader {
	margin-left: 10%;
}

.header {
	height: 74px;
	width: 100%;
	margin-left: -10px;
	margin-bottom: 40px;
    z-index: 1000; 
	position:fixed;
	top:0px;
	background-color:#141414;
}

.menu {
	margin-left:189px;
	font-family:'Hind', Helvetica, Arial, sans-serif;
	font-size:18px;
	padding-bottom: 15px;
	line-height:18px;
	color:#ffffff;
	font-weight: 200;
}

.pageTitle {
	height: 100px;
}
	
.headings {
	color:#ffffff;
	text-align:center;
	margin-top:0px;
	margin-bottom:10px;
	margin-left:15px;
	padding-top: 10px;
	padding-bottom: 15px;
	padding-left: 10px;
	font-family:'Hind', Helvetica, Arial, sans-serif;
	font-size:30px;
	text-shadow:0 0 6px rgba(0, 0, 0, 1.0), 
		0 0 6px rgba(0, 0, 0, 1.0), 0 0 6px rgba(0, 0, 0, 1.0);
}

.copyright {
	padding: 15px;
	font-family:'Hind', Helvetica, Arial, sans-serif;
	font-size:15px;
	text-align:center;
	color:#FFFFFF;
}

li {
	text-align:left;
	font-size:18px;
    font-family: 'Hind'; 
	font-weight: 100;
	color:#c6c6c6;
	line-height:1.2;
	font-family:'Hind', Helvetica, Arial, sans-serif;
}

.imageTitle {
	width:100%;
	height:100%;
	margin-top:10px;
	margin-bottom:20px;
	font-family:'Hind', Helvetica, Arial, sans-serif;
	font-size:30px;
	text-align:center;
	text-shadow:0 0 6px rgba(0, 0, 0, 1.0), 
		0 0 6px rgba(0, 0, 0, 1.0), 0 0 6px rgba(0, 0, 0, 1.0);
}

.imageContent {
	background-repeat:no-repeat;
	background-position:center center;
}
	
.boxTitle {
	margin-top:0px;
	margin-bottom:10px;
	margin-left:15px;
	padding-top: 10px;
	padding-bottom: 15px;
	padding-left: 10px;
	font-family:'Hind';
	font-weight: 400;
	font-size:30px;
	text-align:left;
	color:#e5e5e5;
}

.boxContent {
	margin-top: 32px;
	line-height: 1.6;
	padding-left: 10px;
	padding-right: 10px;
	font-size:18px;
	text-align:left;
    font-family: 'Hind'; 
	font-weight: 100;
	color:#c6c6c6;
}

.infoBox {
	width:476px;
	height:267px;
	padding-right:40px;
	margin-right:16px;
	overflow:hidden;
	position: relative;
	line-height:4px;
}

.infoBoxContent {
	background-color: rgba(0, 0, 0, .9);
	color:#FFFFFF;
	position:absolute;
	z-index:99;
	width:100%;
	height:auto;
	bottom:-20px;
	opacity:0;
	padding:16px;
}

.infoBoxSeparator {
	background-color:#555555;
	width:400px;
	height:1px;
}

.infoBoxSeparatorSmall {
	background-color:#555555;
	width:170px;
	height:1px;
}

.infoboxtitle {
 	font-family:"Hind", Helvetica, Arial, sans-serif;
	font-size:20px;
}
.infoboxyear {
 	font-family:"Hind", Helvetica, Arial, sans-serif;
	font-size:11px;
	position:relative;
	top:-8px;
}
.infoboxclient {
 	font-family:"Hind", Helvetica, Arial, sans-serif;
	font-size:13px;
	position:relative;
	top:-4px;
}
.infoboxdesc {
 	font-family:"Hind", Helvetica, Arial, sans-serif;
	font-size:14px;
	line-height:20px;
}

.infoBox:hover:before .infoBoxContent{
	bottom:-20px;
	opacity:0;
}

.infoBox:hover .infoBoxContent {
    transition: all 0.2s ease,bottom 0.2s ease;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	bottom:0px;
	opacity:1;
}

.infoBoxImage {
	position:absolute;
	
}

.infoBoxImageEmbedded {
}


.boxImage {
	padding-right:40px;
}

td {
    vertical-align:top;
    text-align:left;
}

#logo {
	position: absolute;
	margin-left: 0px;
	margin-right: 0px;
	width:189px;
	height:395px;
    z-index: 1001; 
}

#logofixed {	
	position: absolute;
	margin-left: 0px;
	margin-right: 0px;
	width:189px;
	padding-bottom:200px;
}

.menubutton {
	float:left;
	margin-top:10px;
	padding-top:20px;
	height:50px;
	padding-left:30px;
	padding-right:8px;
    z-index: 1002; 
}

a {
	transition: all 0.2s ease-in;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	text-decoration:none;
	color: rgba(200, 200, 200, 1.0);		
}

a img {
border: none;
}

.menubutton a {
	position: relative;
	color: white;
	opacity: 0.7;
}

.menubutton a:hover {
	transition: all 0.2s ease-in;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	color: white;
	opacity: 1;
}

.menubutton a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: #FFFFFF;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.menubutton a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.boxContent a {
	font-size: 18px;
	font-weight: 500;
	transition: all 0.2s ease-in;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	text-shadow:0 0 5px rgba(0, 0, 0, 1.0),
		0 0 5px rgba(0, 0, 0, 1.0);
	color: yellow;
}

.boxContent a:hover {
	transition: all 0.2s ease-in;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	color: white;
}

.storybox, .storyboxFluid {
	text-align:center;
	color:#ffffff;
	background:rgba(0, 0, 0, .8);
	margin:0px;
	margin-bottom:10px;
	padding:16px;
	height: auto;
}

.storyslice {
	text-align:left;
	color:#ffffff;
	background:rgba(0, 0, 0, .8);
	margin:0px;
	margin-bottom:10px;
	padding:40px;
	margin-left:-1000px;
	min-height: 340px;
}

.storysliceInner {
	text-align:left;
	color:#ffffff;
	margin-left:1000px;
}

.storysliceRight{
	text-align:left;
	color:#ffffff;
	background:rgba(0, 0, 0, .8);
	margin:0px;
	margin-bottom:10px;
	padding:40px;
	margin-right:-1000px;
	min-height: 340px;
}

.storysliceRightInner {
	text-align:left;
	color:#ffffff;
	width:900px;
}

.storyboxFluid {
	width: auto;
	min-height: 10px;
    display: inline-block;
}

.storyboxInner {
	height: auto;
	width: auto;
	text-align: center;
	background: #303030;
	padding: 20px;
	padding-left: 30px;
	padding-right: 30px;
	position:relative;
}


.storyboxFooter {
	padding: 10px;
	width:925px;
	height: auto;
	color:#ffffff;
	background:#303030;
	border-style:solid;
	border-width:1px;
	border-color:#181818;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
}

.storyboxFooterInner {
	padding: 10px;
	text-align: center;
	font-family:"Hind", Helvetica, Arial, sans-serif;
	text-shadow:0 0 6px rgba(0, 0, 0, 1.0);
	font-size:25px;
}

.slidesheet {
	text-align:center;
	width:800px;
	height: 350px;
	color:#ffffff;
	background:#303030;
	margin:40px;
	padding:10px;
	border-style:solid;
	border-width:1px;
	border-color:#181818;
}

.slidesheetInner {
	width: 780px;
	height: 330px;
	text-align: center;
	background: #303030;
}
/*==================================================
 * Cards
 * ===============================================*/
 
 .cards {
	margin-bottom:400px;
 }
 
 .card {
	position:relative;
 	font-family:"Hind", Helvetica, Arial, sans-serif;
	font-size:16px;
	background-image:url('images/card.png');
	background-repeat:no-repeat;
	background-position: top center;
	width:279px;
	height:340px;
	margin: 20px;
	float:left;
	text-align:left;
 }
 
.cardavatar {
	position:absolute;
	margin: 16px;
}

.cardicon1 {
	position:absolute;
	top: 32px;
	right: 32px;
}

.cardicon2 {
	position:absolute;
	top: 100px;
	right: 32px;
}

.cardname {
	color:#EEEEEE;
	font-size:28px;
	margin-left: 28px;
	margin-top: 240px;
}

.cardrole {
	color:#CCCCCC;
	font-size:20px;
	margin-left: 28px;
	font-weight:100;
	margin-top: -10px;
}
 

/*==================================================
 * shadowUpDown
 * ===============================================*/
.shadowBox
{
  	box-shadow:0px 0px 12px 6px rgba(0, 0, 0, 0.3);
}

.shadowBoxInner
{
  	box-shadow:0px 0px 10px 6px rgba(0, 0, 0, 0.4);
}

/* =============================================================================
   Media Queries
   ========================================================================== */

/* 320px and greater */
@media only screen and (min-width: 320px) {

}

/* 480px and greater */
@media only screen and (min-width: 480px) {

}

/* 768px and greater */
@media only screen and (min-width: 768px) {

}

/* 1024px and greater */
@media only screen and (min-width: 1024px) {

}

/* Retina screens */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {

}

/* =============================================================================
   Non-Semantic Classes
   ========================================================================== */
   
/* Input focus styles */
input:focus {outline:0;border:1px solid #0091BD;} /* Gets rid of blue glow on field focus, adds border color instead */
   
   
   
   
/* EFFECTS! */
.glowing {
	transition: box-shadow 0.2s ease-in;
	-webkit-transition: box-shadow 0.2s ease-in;
	-moz-transition: box-shadow 0.2s ease-in;
	-o-transition: box-shadow 0.2s ease-in;
	color: #fff;
  	box-shadow:0px 0px 10px 6px rgba(0, 0, 0, 0.4);
}

.glowing:hover {	
	transition: box-shadow 0.2s ease-in;
	-webkit-transition: box-shadow 0.2s ease-in;
	-moz-transition: box-shadow 0.2s ease-in;
	-o-transition: box-shadow 0.2s ease-in;
	
	box-shadow: 0 0 20px rgba(128,128,128,.6), inset 0 0 10px rgba(128,128,128,1);
}

.rotatedRight {
	transform:rotate(3deg);
	-ms-transform:rotate(3deg); /* IE 9 */
	-moz-transform:rotate(3deg); /* Firefox */
	-webkit-transform:rotate(3deg); /* Safari and Chrome */
	-o-transform:rotate(3deg); /* Opera */
}

.rotatedLeft {
	transform:rotate(-3deg);
	-ms-transform:rotate(-3deg); /* IE 9 */
	-moz-transform:rotate(-3deg); /* Firefox */
	-webkit-transform:rotate(-3deg); /* Safari and Chrome */
	-o-transform:rotate(-3deg); /* Opera */
}


.rotatedRight2 {
	transform:rotate(6deg);
	-ms-transform:rotate(6deg); /* IE 9 */
	-moz-transform:rotate(6deg); /* Firefox */
	-webkit-transform:rotate(6deg); /* Safari and Chrome */
	-o-transform:rotate(6deg); /* Opera */
}

.rotatedLeft2 {
	transform:rotate(-4deg);
	-ms-transform:rotate(-4deg); /* IE 9 */
	-moz-transform:rotate(-4deg); /* Firefox */
	-webkit-transform:rotate(-4deg); /* Safari and Chrome */
	-o-transform:rotate(-4deg); /* Opera */
}

.shadow {
	-moz-box-shadow: 3px 3px 4px #000;
	-webkit-box-shadow: 3px 3px 4px #000;
	box-shadow: 3px 3px 4px #000;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}