/* ====== 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: 400px;
	height: auto;
	padding-bottom: 40px;
}

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

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

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

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-family: 'Merriweather', serif;
	font-size: 1.1em;
	line-height: 2.0;
	margin-top: 1.5em;
	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;
	font-weight: 900;
}

a {
	text-decoration: none;
	color: #009B7D;
	font-family: inherit;
}

a:hover {
	border-bottom: 1px #009B7D dotted;
}

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: #2A2C39;
   font-size: 1.0em;
   margin-left: 1em;
}

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

.icon-th, .icon-menu, .icon-th-large-1 {
	color: #FFFFFF;
	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: #FFF;
	vertical-align: middle;
	font-family: 'Lato', sans-serif;
	font-weight: 400;
}

.logo { 
	float: left;
}

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

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

li.menu a:hover {
	border-bottom: 1px dotted white;
}

.nav li.navdark, .nav li.navdark a {
	color: #2A2C39;
	vertical-align: middle;
}
	
.nav li.navdark a:hover {
	border-bottom: 1px dotted #2A2C39;
}

/* ============================================================
   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:1200px; margin:auto; padding-top: 50px; padding-bottom: 50px; }
#container { margin: 0 auto; }
.item { margin-bottom:15px; 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: 'Lato', sans-serif;
	font-size: 0.6em;
	font-weight: 900;
	letter-spacing: 0.05em;
	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:2.0em; 
	font-weight:900; 
	font-family: 'Lato', serif; 
	letter-spacing:0; 
	text-transform:none; 
	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: 'Lato', 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;
	min-height: 200px; 
	padding-bottom:0px; 
	max-width: 700px;
	margin-left:auto;
	margin-right:auto;
}

.homebanner h2 { margin-bottom: 20px; margin-top: 100px; }

.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: 80px;
	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 h2, .parallax-container h3 {
	max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

/* ------------------------------------------------------------
   Parallax Background Images
------------------------------------------------------------ */
.parallax-HOME { padding-top:0; }

.parallax-TDNA1 { background-image: url(../images/topicdna-bg01.jpg); padding-top: 0; padding-bottom: 0;}
.parallax-TDNA2 { background-image: url(../images/topicdna-bg01.jpg); }
.parallax-TDNA3 { background-image: url(../images/topicdna-bg02.jpg); }

.parallax-MR1 { background-image: url(../images/medrec-banner03.png); padding-top:0; padding-bottom:0; height: 100%;}
.parallax-MR2 { background-image: url(../images/medrec-bg02.jpg); }

.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); }

.parallax-VC1 { background-image: url(../images/vc-bg01.jpg); padding-top:0; padding-bottom:0; height:100%;}


/* ------------------------------------------------------------
   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;
}

/* ------------------------------------------------------------
   Task Tag Section
------------------------------------------------------------ */

.task {
	margin: 40px 0px 0px 0px;
}

span.task-tag {
	font-size: 0.8em; 
	color:#727272; 
	padding: 10px 15px; 
	border: 1px solid #cbcbcb; 
	border-radius: 4px; 
	display: inline;
	margin: 3px 3px 10px 0px;
	white-space: nowrap;
	line-height: 3.2em;

}

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

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

/* ------------------------------------------------------------
   Text Styles
------------------------------------------------------------ */
.module h1, .content-div h1 { font-family: 'Lato'; font-weight: 900; serif; font-size: 2.0em; text-align: center; }
.module h1.title, .content-div h1.title { font-size: 2.5em; }
.whitetxt h1, .whitetxt h2, .whitetxt h3 { color: #FFF; } /* makes h1, h2 & h3 text white */

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

/* ------------------------------------------------------------
   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: 'Lato', 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: 'Lato', sans-serif; 
	text-transform: uppercase; 
	letter-spacing: 0.05em;
	margin: 0px;
	padding: 0px;
	padding-bottom: 5px; 
}

/* ============================================================
   MEDIA QUERIES
============================================================ */
/* ------------------------------------------------------------
   If screen size 600px wide or less
------------------------------------------------------------ */ 
@media screen and (max-width: 600px) {
  .txt-container, .parallax-container {
    max-width: 90%;
  }
  
  .module h1.title, .content-div h1.title {
  	font-size: 36px;
  }

  .module h1 {
  	font-size: 28px;
  }

  h3 {
  	font-size: 16px;
  }


  /* ------------------------------------------------------------
   If screen size 450px wide or less
------------------------------------------------------------ */ 
@media screen and (max-width: 450px) {
  .txt-container, .parallax-container {
    max-width: 90%;
  }
  
  h6, .module h1.title, .content-div h1.title {
  	font-size: 28px;
  }

  .module h1 {
  	font-size: 24px;
  }

  h3 {
  	font-size: 16px;
  }

  section.client-tag .client span {
  	font-size: 10px;
  }

  .homebanner h2 {
  	margin-top: 80px;
  }

  .parallax-bg {
  	padding-bottom: 80px;
  }