/* ====== RESET STYLES ====== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* ============================================================
   CLEARFIX
============================================================ */
.clear:before,
.clear:after {
    content: "";
    display: table;
}

.clear:after { clear: both; }
.clear { zoom: 1; /* For IE 6/7 (trigger hasLayout) */ }


/* ============================================================
   STYLES
============================================================ */
body { background-color: #F6F6F6; text-align:center; }

.aboutpg { background-color: #F6F6F6; text-align:left; }

.wrapper { padding: 60px 30px 30px 30px; }

.logo-div {
	margin: 0 auto;
	max-width: 33px;
	height: auto;
	padding-bottom: 10px;
}

.logo-div a:hover {
	border-bottom: none;
}

.photo-div {
	margin: 0 auto;
	max-width: 500px;
	height: auto;
	padding-bottom: 40px;
}

.content-div {
	margin: 0 auto;
	max-width: 400px;
	height: auto;
	padding-bottom: 90px;
}

h1, h2, h3, h4, h5, h6, li {
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
}

h1 {
	font-size: 2.0em;
	line-height: 1.4;
	margin-top: 0;
	color: #2A2C39;
	margin-bottom: 0.5em;
}

h2 {
	font-size: 0.7em;
	font-weight: 900;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-top: 3.5em;
	margin-bottom: 1.0em;
	color: #2A2C39;
}

h3 {
	font-size: 1.0em;
	line-height: 1.6;
	margin-top: 0.9em;
	color: #2A2C39;
}

h4 { /*next/previous project title*/
	color: #FFF; 
	font-size: 1.2em; 
	letter-spacing: 0.01em; 
	text-transform: none;
	margin: 0px;
	padding: 0px;
}

h5 { /*next/previous project header*/
	color: #FFF;  
	padding-top: 10px; 
	font-size: 0.6em;
	font-weight: 700;
	text-transform: uppercase; 
	letter-spacing: 0.05em;
	margin: 0px;
	padding: 0px;
	padding-bottom: 5px;
}

h6 { /*homepage banner*/
	font-size: 2.5em;
	line-height: 1.4;
	margin-top: 0;
	color: #FFF;
	font-weight: 100;
}

a {
	text-decoration: none;
	color: #393c3d;
	font-family: inherit;
}

a:hover {
	border-bottom: 2px solid #393c3d;
}

ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

li {
	font-size: 1.0em;
	line-height: 1.6;
	color: #2A2C39;
}

.columns {
	margin-top: 0.9em;
 	/* Column Count */
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
	/* Column Gap */
    -webkit-column-gap: 10px; /* Chrome, Safari, Opera */
    -moz-column-gap: 10px; /* Firefox */
    column-gap: 10px;
}


/* ============================================================
   RESPONSIVE IMAGE
============================================================ */
.responsive-image {
	height:auto;
	width:100%;
}


/* ============================================================
   ICONS
============================================================ */
[class^="icon-"]:before, [class*=" icon-"]:before  {
   content: "";
   margin-left: 0;
   margin: 0;
}

.icon-behance-squared, .icon-linkedin-squared, .icon-pinterest-squared, .icon-instagramm {
   color: #393c3d;
   font-size: 1.0em;
   margin-left: 1em;
}

.icon-linkedin-squared {
   margin-left: 0;
}

.icon-th, .icon-menu, .icon-th-large-1 {
	color: #393c3d;
	font-size: 1.5em;
	margin-left: 0em;
}


/* ============================================================
   NAVIGATION
============================================================ */
.nav {
    text-align: justify;
	padding-left: 20px;
	padding-right: 0;
	height:50px;
	padding: 15px;
	margin-left: auto;
    margin-right: auto;
}

.nav li, .nav a {
	color: #393c3d;
	vertical-align: middle;
}

.logo a:hover { 
	border-bottom: none;
}

.menu { 
	/*float: right;
	padding-left: 30px;
	padding-top: 10px;*/
}

li.logo {
	display: inline; 
	padding-left: 30px; 
	padding-right: 30px;
}

li.logo a:hover {
	border-bottom: none;
}

li.menu {
	display: inline; 
	vertical-align: super; 
	letter-spacing: 0.1em;
}

li.menu a:hover {
	border-bottom: 2px solid #393c3d;
}

.nav li.navdark, .nav li.navdark a {
	color: #393c3d;
}
	
.nav li.navdark a:hover {
	border-bottom: 2px solid #393c3d;
}

/* ============================================================
   FADE-IN WEBPAGE ANIMATION
============================================================ */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}

/* ============================================================
   HOMEPAGE MASONRY
============================================================ */
/* ------------------------------------------------------------
   Primary Structure
------------------------------------------------------------ */
#masonry { max-width:1120px; margin:auto; padding-top: 50px; padding-bottom: 50px; }
#container { margin: 0 auto; }
.item { margin-bottom:5px; width: 370px; position: relative; }

/* ------------------------------------------------------------
   Client Name
------------------------------------------------------------ */
.client { position: absolute; width: 100%; top: 0; text-align: center; height: auto; }

.client span { 
	display: inline-block;
	background-color: #fff; 
	padding: 5px 10px;
	font-family: 'Raleway', sans-serif;
	font-size: 0.6em;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #2A2C39;
}

/* ------------------------------------------------------------
   Thumbnail Rollover Text
------------------------------------------------------------ */
.showtext {	opacity: 0;	position: absolute; top: 40%; width: 80%; text-align: center; z-index:10; }

h2.showtext { 
	color:#FFF; 
	font-size:1.5em; 
	font-weight:400; 
	font-family: 'Raleway', serif; 
	letter-spacing:0.1em; 
	text-transform:uppercase; 
	margin-top: 0; 
	top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%) !important;
}

.showtext span { 
	display: block; 
	padding-top: 10px; 
	font-size: 0.3em; 
	font-family: 'Raleway', sans-serif; 
	text-transform: uppercase; 
	letter-spacing: 0.05em; 
}

/* ------------------------------------------------------------
   Thumbnail Overlay
------------------------------------------------------------ */
.overlay { background-color: #2A2C39; }

/* ------------------------------------------------------------
   Thubmnail Hover Effects
------------------------------------------------------------ */
.item:hover .showtext {	
	opacity: 1; 
	-moz-transition-property: opacity;
	-webkit-transition-property: opacity;
	-o-transition-property: opacity;
	transition-property: opacity;
	-moz-transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	transition-duration: 0.5s;
}

.item:hover .overlay img { 
	opacity: 0.05; 
	-moz-transition-property: opacity;
	-webkit-transition-property: opacity;
	-o-transition-property: opacity;
	transition-property: opacity;
	-moz-transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	transition-duration: 0.5s;
}

.item:hover .client span { opacity: 1; }	

/* ============================================================
   HOME BANNER
============================================================ */
/*.homebanner {
	text-align:center;
	height: 200px; 
	padding-bottom:100px; 
	max-width: 700px;
	margin-left:auto;
	margin-right:auto;
}*/

/*.homebanner h2 { margin-bottom: 20px; margin-top:150px; }*/

/*.whiteline { /* thick white divider line
	height: 5px;
	width: 30px;
	background-color: #FFF;
	margin-top: 30px;
	margin-left:auto; 
	margin-right:auto;
} */

/* ============================================================
   PROJECT DETAILS
============================================================ */
/* ------------------------------------------------------------
   Primary Structure
------------------------------------------------------------ */
.container { max-width: 1120px; height: 100%; margin-left: auto; margin-right: auto; }
section.module { padding-left: 20px; padding-right: 20px; }
section.module:last-child {	margin-bottom: 0; }

/* ------------------------------------------------------------
   Parallax Section
------------------------------------------------------------ */
.parallax-bg {
	background-attachment: fixed;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
	position: relative;
	padding-top: 90px;
	padding-bottom: 100px;
}

.parallax-container img, .container img {
	max-width:100%;
	height:auto;
	margin-left:auto; 
	margin-right:auto; 
	display:block;
}

/* ------------------------------------------------------------
   Text & Image Parallax Container
------------------------------------------------------------ */
.parallax-container {  /* text+img containers */
	max-width: 800px;
	text-align: left;
    margin-left: auto;
    margin-right: auto;
}

.parallax-container h1, .parallax-container h3 {
	max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* ------------------------------------------------------------
   Parallax Background Images
------------------------------------------------------------ */
.parallax-MG1 { background-image: url(../images/Marigold-bg01.jpg); padding-top:0; padding-bottom:0; }
.parallax-MG2 { background-image: url(../images/Marigold-bg02.jpg); }
.parallax-MG3 { background-image: url(../images/Marigold-bg03.jpg); }
.parallax-MG4 { background-image: url(../images/Marigold-bg04.jpg); }

.parallax-AM1 { background-image: url(../images/Maya-bg01.jpg); padding-top:0; padding-bottom:0; }

.parallax-TD1 { background-image: url(../images/TDInsurance-bg01.jpg); background-color: #d6d7d8; padding-top:0; padding-bottom:0px; }
.parallax-TD2 { background-image: url(../images/TDInsurance-bg02.jpg); }

.parallax-XP1 { background-image: url(../images/XPrize-bg01.jpg); padding-top:0; padding-bottom:0; }
.parallax-XP2 { background-image: url(../images/XPrize-bg01.jpg); }

.parallax-UN1 { background-image: url(../images/Unifor-bg02.jpg); padding-top:0; padding-bottom:0; }
.parallax-UN2 { background-image: url(../images/Unifor-bg01.jpg); }

.parallax-LG0 { background-image: url(../images/Logos-bg00.jpg); padding-top:0; padding-bottom:0; }
.parallax-LG1 { background-image: url(../images/Logos-bg01.jpg); }
.parallax-LG2 { background-image: url(../images/Logos-bg02.jpg); }
.parallax-LG3 { background-image: url(../images/Logos-bg03.jpg); }
.parallax-LG4 { background-image: url(../images/Logos-bg04.jpg); }
.parallax-LG5 { background-image: url(../images/Logos-bg05.jpg); }



/* ------------------------------------------------------------
   Content Section
------------------------------------------------------------*/ 
section.content {
	padding-top: 90px;
	padding-bottom: 80px;
	position: relative;
}

/* ------------------------------------------------------------
   Client Tag Section
------------------------------------------------------------ */
section.client-tag { position: relative; }

section.client-tag .client span {  /* client tag */
	background-color: #2A2C39;
	color: #FFF;
	font-size: 0.7em;
	letter-spacing: 1px;
	padding: 10px 12px;
	margin-left: -20px;
}

/* ------------------------------------------------------------
   Text Container
------------------------------------------------------------ */
.txt-container, .cap-container {  /* text & caption containers */
	max-width: 480px;
	text-align: left;
    margin-left: auto;
    margin-right: auto;
}

.txt-container { padding-bottom: 40px; }
.cap-container { padding-bottom: 10px; }

/* ------------------------------------------------------------
   Text Styles
------------------------------------------------------------ */
.module h1 { font-family: 'Raleway', serif; font-size: 1.5em; }
.whitetxt h1, .whitetxt h3 { color: #FFF; } /* makes h1 & h3 text white */

.blackline { /* thick black divider line */
	height: 5px;
	width: 30px;
	background-color: #2A2C39;
	margin: 25px 0;
}

/* ------------------------------------------------------------
   YouTube Video Container
------------------------------------------------------------ */ 
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; 
	height: 0; 
	overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ============================================================
   NEXT / PREVIOUS PROJECT
============================================================ */

.more-projects {
    width: 100%;
	padding: 25px 0px 25px 0px;
	background-color:#2A2C39;
}

.next-project, .previous-project {
	float: left;
	padding: 0 5%;
	width: 30%;
	height: 100%;
}

.next-project { text-align: right; }
.previous-project { text-align: left; }
.back-home, a.back-home:hover { 
	float: left; 
	text-align: center; 
	padding: 0 0;
	padding-top: 0.5%;
	width: 20%; 
	height:100%;
    right: 0;
    top: 0;
}

.back-home a:hover {
	border-bottom: none;
}

.next-project h1, .previous-project h1 { 
	color: #FFF; 
	font-size: 1.2em; 
	font-weight: 400; 
	font-family: 'Raleway', serif; 
	letter-spacing: 0.01em; 
	text-transform: none;
	margin: 0px;
	padding: 0px;
}

.next-project a, .previous-project a {
	color:#FFF;
}

.next-project a:hover, .previous-project a:hover {
	border-bottom: 1px #FFF dotted;
}

.next-project h2, .previous-project h2 {
	color: #FFF;  
	padding-top: 10px; 
	font-size: 0.6em;
	font-weight: 700;
	font-family: 'Raleway', sans-serif; 
	text-transform: uppercase; 
	letter-spacing: 0.05em;
	margin: 0px;
	padding: 0px;
	padding-bottom: 5px; 
}