/* CSS Document */

html 
{
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body 
{
  margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary
{
  display: block;
}


body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
  width:100%;
}

/*form
{
	margin-top:10%;
	margin-bottom:0%;
}*/

#contact_form
{
	margin:10% 0% 12% 36%;
	overflow:auto;
}

#nav
{
	width:100%;
	padding-top:2%;	
	padding-bottom:2%;
	box-shadow:0px 2px 3px #888888;
	position:fixed;
	background-color: #314C65 ;
	z-index:4;
	font-size: 14px;
}

li > a
{
	color:white;
}

a:hover
{
	color:white;
}	

div#nav >  nav > li
{
	list-style:none;
	display:inline;
	padding:1.5%;
	//font-style:Ballet;
	color:#FFFFFF;
	font-size:15;
}

div#innovation_definition > strong
{
	text-align:center;
	font-size:16;
}

img[alt="When_change_is_required ... Innovation_Works!"]
{
	margin-bottom: 2%;
	margin-top:2%;
	display:block;
	overflow:auto;
	clear:both;
}

img[alt="Small_When_change_is_required ... Innovation_Works!"]
{
	display:none;
}	

#under_construction
{
		margin-bottom: 2%;
	    margin-top:2%;
	    display:block;
		overflow:auto;
		clear:both;
}

#under_construction_small
{
	display:none;
}

#banner_logo
{
	margin-left:25%;
	margin-top:2%;
	display:block;
	overflow:auto;
	clear:both;
}

#banner_logo_small
{
	display:none;
}	

h1
{
	margin-bottom:2%;
	margin-left:5%;
	margin-top:7%;
}

#services
{
	width:70%;
	margin:8% 0% 12% 15%;
	overflow:auto;
}	

p
{
	float:left;
	overflow:auto;
}

img[ alt = "services_img"]
{
	float:left;
	display:inline;
	margin:2% 2% 2% 0%;
}

#resource_section
{
	width:80%;
	margin: 8% 0% 10% 10%;
	overflow:auto;
}

img[ alt = "resource"]
{
	float:left;
	display:inline;
	margin:2% 9% 2% 0%;
}	


/* About Page */
#about
{
	width:60%;
	margin:4% 0% .5% 18%;
	float:left;
	margin-left:20%;
}

img[ alt = "about" ]
{
	float:left;
	margin:.20% 35% 1.5% 15%;
	overflow:auto;
}
.about_title
{
	/* margin-left:39%; */
	font-size:24px;
}

h3
{
	font-size:26px;
	margin:1% 0% 3% 0%;
}	

div #about > div
{
	margin-bottom:10%;
}	

#last_line
{
	margin-bottom:10%;
	overflow:auto;
}	


/* Blog Page */

.entry
{
	width:65%;
	margin:3% 0% 3% 20%;
	background-color:#DBEBFA;
	border-radius:10px;
	color:black;
}	

img[ alt ="blog_img"]
{
	float:left;
	margin:2%;
} 	

.blog_preview
{
	padding:2%;
	width:98%;
}	

.button
{
	margin-bottom:0%;
	margin-left:82%;
	color:black;
	margin-right:0%;
}
	
.title
{
	margin:12% 0% 2% 20%;
}

.summary
{
	padding-top:2%;
	padding-bottom:2%;
	width:60%;
}	

.article
{
	width:60%;
	float:left;
	margin-left:20%;
	margin-top:8%;
	overflow:auto;
}	

#last_entry
{
	margin-bottom:15%;
}	


img[alt="resource"]
{
	margin:3%;
}

/*Index Page */
#innovation_definition
{
	padding:0.75%;
	background-color:orange;
	overflow:auto;
	width:600px;
	float:left;
	margin:2% 0% 2% 22%;
	border-radius:10px ;
}

#index_text
{
	width:75%;
	float:left;
	margin:2% 0% 5% 11%;
	padding:2%;
	overflow:auto;
}	

#main
{
	
	width:100%;
	float:left;
	display:inline;
	overflow:auto;
	margin-bottom:3%;
}

#body
{
	width:100%;
	margin-top:4%;
}	

/* Services Page */
#services_page
{
	margin-left:4%;
	}

#motto
{
	margin:8% 0% 8% 15%;
	width:60%;
}	

span
{
	color:green;
	font-size:18;
}

#innovation_works_words
{
	margin-bottom:10%;
}	

img[alt="mail_to_innovation_works"]
{
	margin-top:8%;
	margin-bottom:29%;
}	

#funnel
{
	margin:10% 0% 0% 20%;
}

#funnel_mid
{
	display:none;
}	

#funnel_small
{
	display:none;
}		

/*All Pages */
#innovation_logo
{
	z-index:6;
	position:fixed;
	padding:0;
	margin:0;
	float:right;
	margin-left:74%;
	border-radius:10px;
	margin-top:0.36%;	
}	

#innovation_logo_small
{
	display:none;
}
	
footer
{
	height:65px;
	background-color:#2B445C;
	padding-top:1%;
	clear:both;
	bottom: 0;
	right:0;
	position:fixed;
	width:100%;
	
}

#footer_middle
{
	display:inline;
	width:50%;
	float:left;
	margin-left:35%;
	position:absolute;
}

img[alt="social_media"]
{
	margin-right:3%;
}

img[alt="social_media_small"]
{
	display:none;
}	

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
	
}

.space
{
	margin-bottom:8%;
	width:100%;
}	

/*Home page*/
/*
#line_up1
{
	display:inline;
	margin:0% 0% 0% 0%;
}	
	
#line_up2													
{	
	display:inline;
	margin:0% 0% 0% 0%;
}	

#line_up3
{
	display:inline;
	margin:3% 1% 8% 1%;
}	

#line_up4
{
	display:inline;
	margin:3% 1% 8% 1%;
}

#flip-container
{
    display:inline;
}

#flipper
{
    display:inline;
}
*/

#line_up1
{
	
	float:left;
	display:inline;
	margin:3% 1% 8% 21%;
}	
	
#line_up2													
{	
	
	float:left;
	display:inline;
	margin:3% 1% 8% 1%;
}	

#line_up3
{
	
	float:left;
	display:inline;
	margin:3% 1% 8% 1%;
}	

#line_up4
{
	
	float:left;
	display:inline;
	margin:3% 1% 8% 1%;
}	

#line_up1_small
{
	display:none;
}	
	
#line_up2_small												
{
	display:none;
}	

#line_up3_small
{
	display:none;
}	

#line_up4_small
{
	display:none;
}	

 ---------------------------------------------------------------------------------------------
// credit goes to : http://davidwalsh.name/css-flip for the flipping squares code.

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
	transform-style: preserve-3d;
	display:inline;
	margin:2%;
	padding:0%;
	float:left;
}
	/*  UPDATED! flip the pane when hovered */
	.flip-container:hover .back {
		transform: rotateY(0deg);
	}
	.flip-container:hover .front {
	    transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	
	height:150px;
	width:150px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	transition: 0.6s;
	transform-style: preserve-3d;

	position: absolute;
	top: 0;
	left: 0;
}

/*  UPDATED! front pane, placed above back */
.front {
	z-index: 2;
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}
/* 
	Some vertical flip updates 
*/
.vertical.flip-container {
	position: relative;
}
	.vertical .back {
		transform: rotateX(180deg);
	}

	.vertical.flip-container:hover .back {
	    transform: rotateX(0deg);
	}

	.vertical.flip-container:hover .front {
	    transform: rotateX(180deg);
	}
	
	
#CvAndMore
{
	margin-top:10%;
}

#xbanner_image
{
    margin-left:5%;
}	
/*----------------------------------------------------------  Media Queries */

@media screen and (min-width: 1701px)
{

	#line_up1
	{
		margin-left:32%;
	}
	
	#innovation_definition
	{
		margin-left:35%;
		width:600px;
	}
	
}

@media screen and (min-width: 1301px) and (max-width: 1700px)
{
	
	img [alt="about"]
	{
		margin:0%;
	}	

    #innovation_logo
	{
		margin: 0.7% 0px 0px 74%;
	}
	
	#line_up1
	{
		margin-bottom:4%;
	}	

	#line_up2
	{
		margin-bottom:4%;
	}
	
	#line_up3
	{
		margin-bottom:4%;
	}	
	
	#line_up4
	{
		margin-bottom:4%;
		margin-right:10%;
	}	
	
	#innovation_definition
	{
		margin-left:25%;
		width:600px;
	}
	
	#footer_middle
	{
		margin-left:38%;
	}	
}	

@media screen and (min-width: 1001px) and (max-width: 1300px)	
{
	#footer_middle
	{
		margin-left: 36%;
	}

	#nav
	{
		padding-top:2.5%;
		padding-bottom:2.5%;
	}
	
    #innovation_logo
	{
		margin: 0.4% 0px 0px 74%;
	}	
	
	#contact_form
	{
		margin:10% 0% 15% 30%;
	}
	
	.button
	{
		width:100px;
	}	
	
	#funnel
	{
		margin-left:12%;
	}		

	#line_up1
	{
		margin:1%;
		margin-left:21%;
		margin-top:5%;
	}
	
	#line_up2
	{
		margin:1%;
		margin-top:5%;
	}
	#line_up3
	{
		margin:1%;
		margin-top:5%;
	}
	#line_up4
	{
		margin:1%;
		margin-top:5%;
	}
	
	#about
	{
		width: 80%;
		margin: 4% 0% 0.5% 10%;
	}	
	
	img[alt="about"]
	{
		margin-left: 23%;
	}	
}	

@media screen and (min-width: 851px) and (max-width: 1000px)
{
	
	#nav
	{
		padding-top: 2.75%;
		padding-bottom: 2.75%;
	}
	
	#motto
	{
		width:70%;
	}
	
	#funnel
	{
		margin-left:4%
	}	

	#line_up1
	{
		margin:1%;
		margin-bottom:4%;
		margin-left:12%;
		margin-top:5%;
	}
	
	#line_up2
	{
		margin:1%;
		margin-bottom:4%;
		margin-top:5%;
	}
	
	#line_up3
	{
		margin:1%;
		margin-bottom:4%;
		margin-top:5%;
	}
	
	#line_up4
	{
		margin:1%;
		margin-bottom:4%;
		margin-top:5%;
	}
	
	img[alt="about"]
	{
		margin:0% 17% 1% 17%;
	}	
	
	#innovation_definition
	{
		margin-left:12.5%;
	}

	#last_line
	{
		margin-bottom:12%;
	}	
}

@media screen and (min-width: 771px) and (max-width: 850px)
{
	#line_up1
	{
		margin:1%;
		margin-bottom:4%;
		margin-left:10%;
		margin-top:3%;
	}
	
	#innovation_definition
	{
		margin-left:20%;
		width:500px;
	}
	
	#funnel
	{
		display: none;
	}
	
	#funnel_min
	{
		display:block;
		margin: 14% 0% 0% 18%;
	}

	#funnel_small
	{
		display: none;
	}

	footer
	{
		padding:0%;
	}
	
	#footer_middle
	{
		padding: 1%;
		width:60%;
		margin-left:15%;
	}

}	
	
@media screen and (max-width: 768px)
{
	#line_up1
	{
		margin:1%;
		margin-bottom:4%;
		margin-left:6%;
		margin-top:3%;
	}

	#innovation_definition
	{
		margin-left:18%;
		width:500px;
	}
		
	.entry
	{
		width:80%;
		margin:3% 0% 3% 10%;
	}

	#contact_form
	{
		margin:14% 0% 0% 32%;
	}	
	
	.button
	{
		width:100px;
		margin-left:75%;
	}
	
	img[alt="about"]
	{
		margin-right:0%;
	}	
	
	#footer_middle
	{
		width:60%;
		margin-left:12%;
	}
	
	}

@media screen and (min-width: 661px) and (max-width: 700px)
{

	#innovation_definition
	{
		margin-left:15%;
		width:400px;
	}

	#line_up1
	{
		margin-left:1%
	}
	
	#footer_middle
	{
		width:70%;
		margin-left:4%;
	}
}

@media screen and (min-width: 601px) and (max-width: 660px)
{
	#line_up1
	{
		margin:0%;
		margin-bottom:4%;
		margin-left:2%;
		margin-top:3%;
	}
	
	#innovation_definition
	{
		margin-left:15%;
		width:400px;
	}
}
	
@media screen and (min-width: 2px) and (max-width: 600px)
{
	#footer_middle
	{
		width:55%;
		margin-left:1%;
	}
	
	#line_up1
	{
		display:none;
	}
	
	#line_up2
	{
		display:none;
	}
	
	#line_up3
	{
		display:none;
	}
	
	#line_up4
	{
		display:none;
	}
	
	#line_up1_small
	{
		display:inline;
		float:left;
		margin:0%;
		margin-top:6%;
		padding:0%;
		margin-left:4%;
		
	}
	
	#line_up2_small
	{
		display:inline;
		float:left;
		margin:0%;
		margin-top:6%;
		padding:0%;
	}
	
	#line_up3_small
	{
		display:inline;
		float:left;
		margin:0%;
		margin-top:6%;
		padding:0%;
	}
	
	#line_up4_small
	{
		display:inline;
		float:left;
		margin:0%;
		margin-top:6%;
		padding:0%;
	}
	
	.flip-container, .front, .back 
	{
		height: 77px;
		width: 75px;
		display: inherit;
	}
	
	#innovation_definition
	{
		margin-left:10%;
		margin-top:5%;
		width:280px;
	}

	img[alt="When_change_is_required ... Innovation_Works!"]
	{
		display:none;
		
	}
	
	img[alt="Small_When_change_is_required ... Innovation_Works!"]
	{
		/*margin-left:15%;*/
		margin-bottom: 5%;
		margin-top:2%;
		display:block;
		overflow:auto;
		clear:both;
	}
	
	#under_construction
	{
	display:none;
	}

	#under_construction_small
	{
		margin-bottom: 2%;
	    margin-top:2%;
	    display:block;
		overflow:auto;
		clear:both;
	}

	#banner_logo
	{
        display:none;		
	}
	
	#banner_logo_small
	{
	    margin-left:10%;
        margin-bottom: 2%;
	    margin-top:2%;
	    display:block;
		overflow:auto;
		clear:both;
	}

	img[alt = "social_media"]
	{
		display:none;
	}		
	
	img[alt = "mess_up"]
	{
		display:inherit;
	}
	
	img[alt="social_media_small"]
	{
		display:inherit;
		margin-right:1%;
	}
	
	/*nav
	{
		display:none;
	}	*/
	
	*#nav
	{
		//background-color:white;
		font-size:smaller;
		height:40px;
		//position:fixed;
	}	
	
	#innovation_logo
	{
		display:none;
	}	
	
	#innovation_logo_small
{
	z-index:22;
	position:fixed;
	padding:0;
	margin:0;
	float:right;
	margin-left:74%;
	border-radius:10px;
	margin-top:0.36%;	
}	
	
}