/* --------- GENERAL --------- */

#container {}

.wrapper   {
	background-color: #5D5D5D;
	margin-right: auto;
	margin-left: auto;
	margin-top:0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	top: 0px;
	max-width: 1200px;
}

h1 {
	color: #FFFFFF;
	font-family: 'Open Sans', sans-serif;
	font-weight: 800;
	font-size: 36px;
	line-height: 40px;
}

h2 {
	color: #FFFFFF;
	font-family: 'Open Sans', sans-serif;
	font-style: italic;
	font-weight: 700;
	font-size: 24px;
	line-height: 30px;
	margin-bottom:5px;
	margin-top:20px;
}

body {
	background-color: #5D5D5D;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

body p {
}

body a {
	color: #FFFFFF;
	font-family: 'Open Sans', sans-serif;
	font-style: italic;
	font-weight: 300;
	font-size: 16px;
	line-height: 30px;
}

ul { list-style: none; }

li {
	display: inline-block;
	float: left;
	padding: 10px
}
.dark-text h1 {
	color: #494E56;
}
.dark-text h2 {
	color:#494E56;
}

.dark-text a {
	color:#494E56;
}


.button  {
	width:340px;
	margin-right: auto;
	margin-left: auto;
}

.button a  {
	display: block;
	color: #FFFFFF;
	background-color: #373B41;
	font-family: 'Open Sans', sans-serif;
	font-style: normal;
	font-weight: 300;
	font-size: 20px;
	text-transform: uppercase;
	text-align: center;
	border: thin solid #FFFFFF;
	padding-top: 10px;
	padding-bottom: 10px;
	text-decoration: none;
}

.button a:hover {
	background-color: #494E56;
}

.button-inverted {
	width:300px;
	margin-right: auto;
	margin-left:auto;
}

.title {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 28px;
	background-color: #373B41;
	height: 54px;
}

.rounded-box {
	width:300px;
	margin-right: auto;
	margin-left: auto;
}

.rounded-box a {
	display:block;
	color: #FFFFFF;
	background-color:#494E56;
	font-family: 'Open Sans', sans-serif;
	font-style: normal;
	font-weight: 300;
	font-size: 20px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	border-radius: 10px;;
	border: thin solid #494E56;
	padding-top: 10px;
	padding-bottom: 10px;
}

.bottom-spacer {
	margin-bottom:5px;	
}

.top-spacer {
	margin-top:5px;	
}

.connector-light {
	display: block;
	width: 29px;
	height: 30px;
	background-color:#494E56;
	margin-left: auto;
	margin-right: auto;
}

.connector-dark {
	display: block;
	width: 29px;
	height: 30px;
	background-color:#373B41;
	margin-left: auto;
	margin-right: auto;
}

.dark-bg {
	background-color: #373B41;
}
.light-bg {
	background-color: #494E56;
}

/* --------------------------------------------------------------------- @ MEDIA - GENERAL */

@media screen and (max-width:768px){
	body a {
		font-size:32px;
		line-height: 45px;
	}
	.button  {
		width:500px;
		margin-right: auto;
		margin-left: auto;
	}
	.button a {
		font-size: 28px;
		line-height: 34px;
	}
	.rounded-box a {
		font-size: 32px;
	}
}

/* --------- HEADER --------- */

.header-wrapper {
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 100;
}

header {
	background-color: #494E56;
	height: 80px;
	max-width: 1200px;
	margin-left:auto;
	margin-right:auto;
	-webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

header.sticky {
	height: 48px;
}

#logo{
	margin-left: 60px;
	margin-top:24px;
	float: left;
	/*width: 200px;*
	/*background-repeat: no-repeat;*/
	/*background-position: center;*/
	/*background-image: url(../images/logo-header.jpg);*/
	display: block;
	-webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#logo.sticky {
	height: 20px;
	margin-top: 8px;
}

nav {
	float: right;
	margin-right:60px;
	margin-top:20px;
	-webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

nav.sticky {
	margin-top:5px;
}

nav ul {
	width: 100%;
	display: block;
	float: right;
	position: static;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	height: 30px;
}

nav ul a {
	display: block;
	width: 20%;
	float: left;
	text-align: center;
	font-family: 'Open Sans', sans-serif;
	font-style: normal;
	font-weight: 300;
	text-decoration: none;
	color:#B8BCC2;
	font-size: 14px;
	line-height: 20px;
}

nav ul a:hover {
	font-weight: 300;
	color: #ffffff;
}

.active-page {
	font-weight: 400;
	color: #ffffff;
}

#menu-icon {
	display: hidden;
	width: 40px;
	height: 40px;
	background: #4C8FEC url(../img/menu-icon.png) center;
}

/* --------------------------------------------------------------------- @ MEDIA - NAV */

@media screen and (max-width:768px){
	.header-wrapper {
		position: absolute;
	}
	header {
		height:120px;
	}
	header.sticky {
		height: 120px;
	}
	nav.sticky {
		margin-top: 20px;
	}
	#logo img {
		height:40px;
	}
	#logo {
		margin-top: 40px;
	}
	#logo.sticky {
		margin-top: 40px;
	}
	#menu-icon {
		display:inline-block;
		background-image: url("../images/mobile-menu-icon.jpg");
		background-size: 100%;
		width: 80px;
		height: 80px;
	}

	nav ul, nav:active ul { 
		z-index:10000;
		display: none;
		position: absolute;
		background: #494E56;
		border: 1px solid #fff;
		right: 60px;
		top: 100px;
		width: 50%;
		height:auto;

	}

	nav li {
		width: 100%;
		padding:0;
		margin:0;
	}

	nav li a {
		display:block;
		padding-top:20px;
		padding-bottom:20px;
		text-align: center;
		width: 100%;
		border-bottom: thin solid #fff;
		font-size: 36px;
	}

	nav li a:active {
		color:#000;
	}

	nav li:active {
		background-color: #fff;
	}

	nav:hover ul {
		display: block;
	}

}

/* --------- IMAGES ----------- */
.image img { 
	display:block;
	max-width:100%;
	margin: 0 auto;
	padding:0;
}

.image {
	position:relative;
	display:block;
	width: 100%;
	max-width: 1200px;
	height: auto;
	clear: left;
	margin: 0 auto;
	padding: 0px;
	background-image: url(../images/image-blank.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.hero {
	margin-top:80px;
}

#barnroom {
	height:504px;
	background-image: url(../images/home-logo.jpg);
}

#hank {
	height: 504px;
	background-image:url(../images/Bio-Pic-v4.jpg);
}

#thinking {
	height: 429px;
	background-image:url(../images/Thinking-Chart.png);
}

#network {
	height: 503px;
	background-image:url(../images/Network-Chart-V2.jpg);
}

#branding {
	height:504px;
	background-image: url(../projects/brand_interaction/stage.jpg);
}



/* --------------------------------------------------------------------- @ MEDIA - IMAGES */

@media screen and (max-width:768px){
	.image {
		max-height: 350px;
	}
	.hero {
		margin-top:120px;
	}
}

@media screen and (max-width:480px){
	.image {
		max-height: 280px;
	}
}


/* ----------- CALL TO ACTION ------------ */

.calltoaction {
	background-color: #373B41;	
	width: 100%;
	margin: 0px;
	padding: 0px;
	border-collapse: collapse;
	border-spacing: 0px 0px;
}
.calltoaction .row {
	margin: 0px;
	padding: 0px;
	border-spacing: 0px 0px;
	border-collapse: collapse;
}
.calltoaction .row .upperleft {
	background-image: url(../images/frame-upper-left.jpg);
	width: 7%;
	background-position: right bottom;
	border-collapse: collapse;
	background-repeat: no-repeat;
	margin: 0px;
	padding: 0px;
}
.calltoaction .row .uppermiddle {
	background-image: url(../images/frame-horizontal-top.jpg);
	background-repeat: repeat-x;
	width: 86%;
	background-position: left bottom;
	border-collapse: collapse;
	border-spacing: 0px 0px;
	text-align: center;
	margin: 0px;
	padding: 0px;
}
.calltoaction .row .upperright {
	width: 7%;
	background-image: url(../images/frame-top-right.jpg);
	background-position: left bottom;
	background-repeat: no-repeat;
	border-collapse: collapse;
	border-spacing: 0px 0px;
	margin: 0px;
	padding: 0px;
}
.calltoaction .row .middleleft {
	
	background-image: url(../images/frame-vertical-left.jpg);
	background-position: right top;
	background-repeat: repeat-y;
	border-collapse: collapse;
	border-spacing: 0px 0px;
	margin: 0px;
	padding: 0px;
}
.calltoaction .row .middlemiddle {
	
	background-color: #373B41;
	border-collapse: collapse;
	text-align: center;
	border-spacing: 0px 0px;
	padding-top: 20px;
	padding-right: 0x;
	padding-bottom: 30px;
	padding-left: 0px;
	margin: 0px;
}
.calltoaction .row .middlemiddle p {
	margin-left:50px;
	margin-right:50px;
}
.calltoaction .row .middleright {
	
	background-image: url(../images/frame-vertical-right.jpg);
	background-position: left top;
	background-repeat: repeat-y;
	border-collapse: collapse;
	border-spacing: 0px 0px;
	padding: 0px;
	margin: 0px;
}
.calltoaction .row .bottomleft {
	
	background-image: url(../images/frame-lower-left.jpg);
	background-position: right top;
	background-repeat: no-repeat;
	border-collapse: collapse;
	border-spacing: 0px 0px;
	margin: 0px;
	padding: 0px;
}
.calltoaction .row .bottommiddle {
	
	background-image: url(../images/frame-horizontal-bottom.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	padding: 0px;
	vertical-align:baseline;
	border-spacing: 0px 0px;
	border-collapse: collapse;
	text-align: center;
}
.calltoaction .row .bottomright {
	
	background-image: url(../images/frame-lower-right.jpg);
	background-position: left top;
	background-repeat: no-repeat;
	border-collapse: collapse;
	border-spacing: 0px 0px;
	margin: 0px;
	padding: 0px;
}

/* --------------------------------------------------------------------- @ MEDIA - CTA TABLES */

@media screen and (max-width:768px){

	.calltoaction .row .upperleft {
		width: 9%;
	}
	.calltoaction .row .uppermiddle {
		width: 82%;
	}
	.calltoaction .row .upperright {
		width: 9%;
	}
	.title {
		height: 60px;
	}
}

@media screen and (max-width:480px){

	.calltoaction .row .upperleft {
		width: 12%;
	}
	.calltoaction .row .uppermiddle {
		width: 76%;
	}
	.calltoaction .row .upperright {
		width: 12%;
	}
	.title {
		height: 48px;
	}
}

/* ---------- WHAT WE DO ---------- */

.creative-framework {
	position:relative;
	height: 486px;
}

#creative-framework-bg {
	position:relative;
	visibility: hidden;
	margin-left: auto;
	margin-right: auto;
	background-image: url(../images/what-we-do-bg.jpg);
	background-position: center;
	background-repeat: no-repeat;
	height: 486px;
}

.cf-header {
	top:-495px;
	visibility: hidden;
	display:block;
	position:relative;
	margin:8px;
}

.cf-header img {
	display:block;
	position:relative;
	top:52px;
	margin-left:auto;
	margin-right:auto;
}

.cf-header a {
	position:relative;
	top:15px;
	display: block;
	margin-left:auto;
	margin-right:auto;
	color: #FFFFFF;
	font-family: 'Open Sans', sans-serif;
	font-style: normal;
	font-weight: 300;
	font-size: 20px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
}
.cf-body a {
	position:relative;
	top:-495px;
	display: block;
	margin-top:30px;
	margin-left:auto;
	margin-right:auto;
	color: #FFFFFF;
	font-family: 'Open Sans', sans-serif;
	font-style: light;
	font-weight: 300;
	font-size: 18px;
	text-align: center;
	text-decoration: none;
}
#platform-body, #experience-body, #campaign-body {
	visibility: hidden;
}

/* --------------------------------------------------------------------- @ MEDIA - WHAT WE DO */

@media screen and (max-width:768px){
	.creative-framework {
		height: 700px;
	}

	#creative-framework-bg {
		background: none;
	}
	.cf-header img {
		height: 60px;
	}
	.cf-header a {
		top:-4px;
		font-size: 32px;
	}
	.cf-body a {
		font-size: 32px;
	}
}

/* ---------- CYCLE SLIDER ---------- */

.cycle-slideshow img {
	max-width:100%;
}

.cycle-slideshow {
	width: 100%;
	max-width: 1200px;
	display: block;
	position: relative;
	overflow: hidden;
	margin-left:auto;
	margin-right:auto;
}

#prev, #next {
	display:block;
	position:absolute;
	top:50%;
	z-index:2000;
	margin-top:-55px;
	cursor:pointer;
	opacity:.3;
}

#prev { left: 0%; }

#next { right: 0%; }

#pager {
	width:100%;
	position:absolute;
	bottom:10px;
	text-align:center;
	z-index:2000;
}

#pager span {
	text-indent:100%;
	white-space:nowrap;
	width:10px;
	height:10px;
	display:inline-block;
	border: 1px solid #373B41;
	border-radius:50%;
	margin:0 10px;
}

#pager .cycle-pager-active {background:#373B41}


/* ------------------------------------- PROJECT DESCRIPTION ---------- */
#project-network {
	height: 503px;
	background-image:url(../images/Section_BG.jpg);
}


#project-13 { /* POPPED VS FRIED */
	background-image:url(../projects/13/stage.jpg);
	height:506px;
}
#project-12 { /* POPPED VS FRIED */
	background-image:url(../projects/12/stage.jpg);
	height:506px;
}
#project-11 { /* POPPED VS FRIED */
	background-image:url(../projects/11/stage.jpg);
	height:506px;
}
#project-10 { /* POPPED VS FRIED */
	background-image:url(../projects/10/stage.jpg);
	height:506px;
}
#project-09 { /* POPPED VS FRIED */
	background-image:url(../projects/09/stage.jpg);
	height:506px;
}
#project-08 { /* POPPED VS FRIED */
	background-image:url(../projects/08/stage.jpg);
	height:506px;
}
#project-07 { /* POPPED VS FRIED */
	background-image:url(../projects/07/stage.jpg);
	height:506px;
}
#project-06 { /* POPPED VS FRIED */
	background-image:url(../projects/06/stage.jpg);
	height:506px;
}
#project-05 { /* POPPED VS FRIED */
	background-image:url(../projects/05/stage.jpg);
	height:506px;
}
#project-04 { /* POPPED VS FRIED */
	background-image:url(../projects/04/stage.jpg);
	height:506px;
}
#project-03 { /* POPPED VS FRIED */
	background-image:url(../projects/03/stage.jpg);
	height:506px;
}
#project-02 { /* POPPED VS FRIED */
	background-image:url(../projects/02/stage.jpg);
	height:506px;
}
#project-01 { /* POPPED VS FRIED */
	background-image:url(../projects/01/stage.jpg);
	height:506px;
}

.project-header {
	display:block;
	position:absolute;
	max-width: 40%;
	top:100px;
	left:50%;
}
.project-description {
	display:block;
	position:absolute;
	max-width:500px;
	top:170px;
	left:50%;
}
.project-description a {
	line-height: 24px;
}

/* --------------------------------------------------------------------- @ MEDIA - PROJECT DESCRIPTION */

@media screen and (max-width:1100px){

	.project-image {
		max-height: 420px;
	}
	.project-description {
		top:140px;
		max-width:450px;
	}
	.project-description a {
		font-size: 14px;
		line-height: 20px;
	}
	.project-description h1 {
		font-size: 30px;
	}
	.project-description h2 {
		font-size: 20px;
	}
	.project-header h1 {
		font-size: 24px;
		line-height: 30px;
	}
}
@media screen and (max-width:950px){

	.project-image {
		max-height: 350px;
	}
	.project-header {
		top:80px;
	}

	.project-description {
		top:115px;
		max-width:400px;
	}
	.project-description a {
		font-size: 12px;
		line-height: 16px;
	}
	.project-description h1 {
		font-size: 24px;
	}
	.project-description h2 {
		font-size: 18px;
	}
}
@media screen and (max-width:768px){
	.project-image {
		max-height: 480px;
		background-position: left;
	}
	.project-hero {
		position:relative;
		display:block;
		overflow:hidden;
		width:200%;
		height:800px;
		border: 5px solid #000;
	}
	.project-header {
		display:block;
		position:static;
		text-align: center;
		max-width:100%;
		padding-left: 20px;
		padding-right: 20px;
		padding-top:10px;
		padding-bottom:10px;
		background-color:#494E56; 
	}
	.project-header h1 {
		color:#fff;
		font-size: 42px;
		line-height: 20px;
		text-transform: uppercase; 
	}
	.project-description {
		display:block;
		position:static;
		max-width:100%;
		padding-left: 40px;
		padding-right: 40px;
		padding-bottom: 40px;
		padding-top: 10px;
		background-image:url(../images/Section_BG.jpg);
		background-size: auto 100%;
		margin:0;
		border-collapse: collapse;
		border:0;
	}
	.project-description a {
		font-weight: 400;
		font-size: 30px;
		line-height: 40px;
	}
	.project-description h2 {
		font-size: 36px;
		line-height: 50px;
		text-align: center;
	}
}

@media screen and (max-width:480px){
	.project-image {
		max-height: 360px;
	}
}


/* ---------- PROJECT CARDS ---------- */

#flex-wrapper {
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

	-webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;

	-webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

	-webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

	background-color:#373B41;
	width:auto;
	margin:0px;
	padding: 0px;
	border-collapse: collapse;
	border-spacing: 0px 0px;

}
#flex-wrapper a {
	text-decoration:none;
	margin-left:10px;
	margin-right:10px;
	margin-top:30px;
	margin-bottom:10px;
	border-radius: 10px;
	/*border:1px solid #7A828E;*/
	background-color:#494E56;
}
#flex-wrapper a:hover {
	border-radius: 10px;
	background-color:#5E656F;
}
.card {
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

	-webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

	 -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: flex-start;
	
	padding: 10px;

	/*float:left;*/
	width:280px; 
	min-height:auto;
	line-height: 20px;

}
.card-content {
	color: #B8BCC2;
	font-family: 'Open Sans', sans-serif;
	font-style: italic;
}
.card-heading {
	display: block;
	font-weight: 700;
	font-size: 20px;
	padding: 10px;
	text-transform: uppercase;
	
}
.project-card-heading {
	color: #B8BCC2;
	font-weight: 400;
	font-size: 20px;
	text-transform: none;
	padding-top:5px;
	padding-bottom:15px;
}
.card-tags {
	font-weight: 100;
	font-size: 14px;
	display: block;
	padding-left: 10px;
	padding-right: 10px;
	padding-top:5px;
	padding-bottom:5px;
	border-bottom: thin solid #7A828E;
	border-top: thin solid #7A828E;

}
.card-description {
	font-weight: 100;
	font-size: 14px;
	display: block;
	padding: 10px;
}
.card-image {
	display: block;
	padding: 0px;
	margin: 0px;
	border-collapse:collapse;
	border:0;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	overflow: hidden;
}
.card-image img {
	display:block;
	width:100%;
	height:auto;
}
.one-column {
	width:920px;
}
.two-column {
	width:440px;
}
.three-column {
	width:280px;
}
.no-bg {
	background-color: none;
}

/* --------------------------------------------------------------------- @ MEDIA - CARDS */

@media screen and (max-width:1200px){
	.two-column {
		width:400px;
	}
}

@media screen and (max-width:1100px){
	.two-column {
		width:360px;
	}
	.one-column {
		width:760px;
	}
}

@media screen and (max-width:1000px){
	.two-column {
		width:320px;
	}
	.one-column {
		width:680px;
	}
}

@media screen and (max-width:900px){
	.two-column {
		width:280px;
	}
	.one-column {
		width:600px;
	}
}

@media screen and (max-width:768px){
	#flex-wrapper {
		display:block;
	}
	#flex-wrapper a {
		display:block;
		margin-left: auto;
		margin-right: auto;
	}
	.card-heading {
		font-size: 42px;
		line-height: 40px;
		padding:20px;
	}
	.card-tags {
		font-size: 30px;
		line-height: 40px;
		padding:20px;
	}
	.card-description {
		font-size: 30px;
		line-height: 40px;
		padding:20px;
	}
	.two-column {
		width:610px;
	}
	.one-column {
		width:610px;
	}
	.three-column {
		width:610px;
	}
}

@media screen and (max-width:480px){
	.two-column {
		width:300px;
	}
	.one-column {
		width:300px;
	}
}

/* --------- PROJECT NETWORK ---------- */
#project-flex-wrapper {
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;

    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: flex-start;

    padding-bottom: 30px;


}
#project-flex-wrapper img {
	width:100%;
}
.project-network-01 {
	-webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    margin-top: 40px;
    cursor:pointer;
}
.project-network-02 {
	-webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    margin-top: 40px;
    cursor:pointer;
}
.project-network-03 {
	-webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}
.project-network-04 {
	-webkit-box-ordinal-group: 4;
    -moz-box-ordinal-group: 4;
    -webkit-order: 4;
    -ms-flex-order: 4;
    order: 4;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    margin-top: 40px;
    cursor:pointer;
}
.project-network-05 {
	 -webkit-box-ordinal-group: 5;
    -moz-box-ordinal-group: 5;
    -webkit-order: 5;
    -ms-flex-order: 5;
    order: 5;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    margin-top: 40px;
    cursor:pointer;
}
.background-blank {
	background-image:url(../images/Section_BG.jpg);	
	background-size: auto 100%
}

@media screen and (max-width:768px){
	#project-flex-wrapper {
		-webkit-flex-wrap: wrap;
    	-ms-flex-wrap: wrap;
    	flex-wrap: wrap;
	}
	.project-network-01 {
		-webkit-box-ordinal-group: 4;
	    -moz-box-ordinal-group: 4;
	    -webkit-order: 4;
	    -ms-flex-order: 4;
	    order: 4;
		margin-top: 0;
		visibility: hidden;
		display:none;
	}
	.project-network-02 {
		-webkit-box-ordinal-group: 1;
	    -moz-box-ordinal-group: 1;
	    -webkit-order: 1;
	    -ms-flex-order: 1;
	    order: 1;
	}
	.project-network-03 {
		-webkit-box-ordinal-group: 2;
	    -moz-box-ordinal-group: 2;
	    -webkit-order: 2;
	    -ms-flex-order: 2;
	    order: 2;
	}
	.project-network-04 {
		-webkit-box-ordinal-group: 3;
	    -moz-box-ordinal-group: 3;
	    -webkit-order: 3;
	    -ms-flex-order: 3;
	    order: 3;
	}
	.project-network-05 {
		-webkit-box-ordinal-group: 5;
	    -moz-box-ordinal-group: 5;
	    -webkit-order: 5;
	    -ms-flex-order: 5;
	    order: 5;
		margin-top: 0;
		visibility: hidden;
		display:none;
	}
}
@media screen and (max-width:700px){
	#project-flex-wrapper {
		flex-direction: column;

	}
	#project-flex-wrapper {
		flex-wrap:wrap;
	}
	.project-network-01 {
		order: 4;
	}
	.project-network-02 {
		order: 2;
	}
	.project-network-03 {
		order: 1;
	}
	.project-network-04 {
		order: 3;
	}
	.project-network-05 {
		order: 5;
	}
}
/* ---------- FOOTER ---------- */


#footer {
	background-color: #494E56;
	/*min-height: 200px;*/
}

#footer-bar {
	height: 48px;
	background-color: #2e3135;	
}

#copyright a {
	display: block;
	float: left;
	font-style: normal;
	color:#B8BCC2;
	margin-left: 55px;
	margin-top: 10px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 12px;
}

.socialicon {
	height:30px;	
}

#socialbar{
	float:right;
	margin-right:60px;
	margin-top: 9px;
}