html {height: 100%; }

body {margin: 0;
padding: 0;
height: 100%;

}


.columnrow2 .formlength ul {list-style: none; margin: 0; padding: 0;}
.columnrow2 .formlength ul li {padding: 0;}

h1, h2, h3, h4, h5, h6 {font-family: 'Average', serif;
color: #000000;

}

h1 {
	

	
	
}

::selection {
background: #2F23F4;
color: white;
}



p {font-family: 'PT Sans', sans-serif; 

	padding-top: 1%;
	margin: 0;
	padding-left: 5%;
	padding-right: 5%;
	
}
img {
	max-width: 100%;
	height: auto;
	width: auto; /* ie8 */
}


em {font-style: normal;font-family: 'PT Sans', sans-serif; }

body.home a.home,
body.contact a.contact,
body.about a.about,
body.expertise a.expertise,
body.casestudies a.casestudies,
body.capabilities a.capabilities {background-image:url(../images/lgreenb.png);
background-position: bottom;
background-repeat: repeat-x;}

body a.home,

body a.about,

body a.contact,

body a.expertise,

body a.casestudies,

body a.capabilities
{
transition:background-color 0.2s ease-in-out; 
    -o-transition:background-color .2s ease-in-out; 
    -moz-transition:background-color .2s ease-in-out; 
    -webkit-transition:background-color 0.2s ease-in-out; 




}

/* cancel out hover on selected */

body.home a.home:hover,
body.contact a.contact:hover,
body.about a.about:hover,
body.expertise a.expertise:hover,
body.casestudies a.casestudies:hover,
body.capabilities a.capabilities:hover
{background-color: rgba(255,255,255,0);

color: #606060;


}

 

body a.home:hover,
body a.about:hover,
body a.contact:hover,
body a.expertise:hover,
body a.casestudies:hover,
body a.capabilities:hover 

{
background-color: #302AF4;
 color:#ffffff;


background-position: bottom;
background-repeat: repeat-x;


}


.wrapper {width: 100%;
min-height:100%;
position: relative;
color: #606060;



}


.innerwrapper {width: 1200px;
	max-width: 100%;
	margin-left: auto;
margin-right: auto;
}


#header { 


position: relative;
}

#content {position: relative;

width: 100%;
margin-left: auto;
margin-right: auto;
height: 100%;


}

.navwrap {width: 100%;
height: auto;


        background-color: #FFFFFF;
        
     
border-bottom: 1px solid #D0D0D0;


        
        
        


}


.navcontainer {width: 100%;
position: relative;
height: auto;
margin-left: auto;
margin-right: auto;

}


.logocontainer {

height: 100px;
width: 35%;
text-align: center;

line-height: 50px;

float: left;




}



.logocontainer h1 {color:#000000;}


.navbuttons {
position: relative;
height: 100px;
width: 65%;

float: left;

 
}


.navbuttons ul {list-style: none;
	margin:0;
padding:0;
float: left;
	
}

.navbuttons li {float:left}


.navbuttons li a {	
	font-family: 'PT Sans', sans-serif; 
	color: #606060;
	font-size: 0.9em;
	display: block;
	float: left;
	line-height: 100px;
	height: 100px;
	
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	width:110px;
	
	}
	
	

.imagest {position: absolute;
bottom: 0%;

height: 100%;
width: 40%;
left: 50%;
}
.headimage {width: 100%;
margin-left: auto;
margin-right: auto;
height: 300px;
position: relative;


}


.blocktext {position: absolute;
bottom: 0%;



	







height:80%;
width: 50%;
font-size: 1.1em;
}


.blocktext h2 {padding-left: 5%;
padding-right: 5%;
}




.mobileheader {

display: none;



}



.circle {padding: 3%;

border-radius: 50%;
background-color: #1b83fa;
}


#footer {position: absolute;
bottom:50px;

width: 100%;
height: 150px;

}

.paddingfooter {padding-top: 220px;}


@-webkit-keyframes fadeit {
	0%   { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
@-moz-keyframes fadeit {
0%   { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
@-ms-keyframes fadeit {
0%   { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}




.column1 {width: 27%;
height: 150px; 
 float: left;
  margin-top: 30px;

}
.column2 {width: 67%; height: 150px;  float: right; margin-top: 30px;


	
}


.column1 h3 {font-size: 1.5em; 
border-top: 1px solid #D0D0D0;
border-bottom: 1px solid #D0D0D0;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 5%;
padding-right: 5%;
}





.column2 h3{text-transform: uppercase;}





#content h3 {text-align: center; margin: 0; }

.line {width: 100%; 
height: 2px;
background-image: url(../images/stroke.gif);
margin-top: 20px;
}


.contactf {z-index: 2;
width: 40%;
height: 50px;
background-image: url(../images/email.png); 
background-position: left center;
background-repeat: no-repeat;
position: absolute;
right: 5%;
line-height: 50px;
padding-left: 5%;
text-transform: uppercase;
font-size: 1.1em;


}

.contactp {z-index: 2;
width: 40%;
height: 50px;
background-image: url(../images/phone.png); 
background-position: left center;
background-repeat: no-repeat;
position: absolute;
left: 5%;
line-height: 50px;
padding-left: 5%;
text-transform: uppercase;
font-size: 1.1em;

}

.contactfi {z-index: 2;
width: 50%;
height: 50px;

position: absolute;
right: 5%;
line-height: 50px;
padding-left: 5%;
text-transform: uppercase;
font-size: 0.9em;

display: none;
}
.contactpi {z-index: 2;
width: 30%;
height: 50px;

position: absolute;
left: 5%;
line-height: 50px;
padding-left: 5%;
text-transform: uppercase;
font-size: 0.9em;

display: none;
}


.blacklink {color: #000000; text-decoration: none;}
.blacklink:hover {color: #000000; text-decoration: underline;}
.blacklink:visited {color: #000000;}


.whitelink {color: #606060; text-decoration: none;}
.whitelink:hover {color: #606060;  text-decoration: underline;}
.whitelink:visited {color: #606060;}



.copyright {width: 100%;
height: 50px;
position: absolute;
bottom: 0px;
text-align: center;
font-size: 1em;
}



.fadeout {width: 100%;
height: 100%;
position: relative;

}


.emailus {width: 200px;
height: 200px;
background-image: url(../images/emails.png);
position: absolute;
top: 0%;
right: 0%;
z-index: 30;
}


.emailusright {height: 200px;
display: block;
width: 200px;
}



.leftblue {width: 60%;
height: 100%;
position: absolute;
left: 0%;
background-image: url(../images/banner.png);
background-position: right center;
background-repeat: no-repeat;
}


.graph {
height: 250px;
position: absolute;
background-image: url(../images/roll.png);
display: none;
bottom: 0;
}


.xaxis {
height: 250px;
position: absolute;
background-image: url(../images/xaxis.png);
display:none;
bottom: 0;

}

.yaxis {
width:100%;
position: absolute;
background-image: url(../images/yaxis.png);
display:none;
bottom: 0;

}


.st {width: 100%;
height: 50%;
position: absolute;
bottom: 50%;
text-align: center;
line-height: 150px;

}

.st h2 {font-size: 2.5em;}


.dr {width: 100%;
height: 50%;
bottom: 0%;
position: absolute;
text-align: center;

}


.hid {display: none;}

/* <<<<<<<<<<<<<<<<<<<<<<<<CASE STUDIES STYLES>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */




#casestudy {width: 100%;
height: auto;
position: relative;
margin-top: 70px;
}

#viewcasestudies {height: 70px;
position: relative;
width: 100%;

}


.cases {position: relative;
margin-bottom: 50px;
}


.cases h2 {text-align: center;}

.cases p{font-size: 1.2em; color: #000000;}

.cases p:first-letter { font-size: 4em; color: #000000; line-height: 1em; float: left; padding-right: 0.3em;}

.columnrow1 h3 {font-size: 1.5em; 
border-top: 1px solid #D0D0D0;
border-bottom: 1px solid #D0D0D0;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 5%;
padding-right: 5%;
}
.largep p:first-letter { font-size: 4em; color: #000000; line-height: 1em; float: left; padding-right: 0.3em;}





.columnrow1 {width: 27%;
height: auto;
 float: left;
  margin-top: 30px;

}
.columnrow2 {width: 67%; height: auto;  float: right; margin-top: 30px;


	
}





.columnrow2 ul {list-style: upper-roman;
margin-left: 10%;
line-height: 40px;
font-family: 'PT Sans', sans-serif; 
}
.columnrow2 ul li {
	
	
	padding-right: 5%;
}


.paperclip {position: absolute;
background-image: url(../images/paper_clip.png);
left: 15%;
top:-65px;
width: 90px;
height: 107px;
display: none;
}



.paperclip2 {position: absolute;
background-image: url(../images/paper_clip.png);
left: 15%;
top:-65px;
width: 90px;
height: 107px;
display: none;
}

.paperclip3 {position: absolute;
background-image: url(../images/paper_clip.png);
left: 15%;
top:-65px;
width: 90px;
height: 107px;
display: none;
}


.paperclip4 {position: absolute;
background-image: url(../images/paper_clip.png);
left: 15%;
top:-65px;
width: 90px;
height: 107px;
display: none;
}


.paperclip5 {position: absolute;
background-image: url(../images/paper_clip.png);
left: 15%;
top:-65px;
width: 90px;
height: 107px;
display: none;
}


#casestudy1 {width: 80%;
height: auto;
position: relative;
display: none;	
background-image: url(../images/paper.png);
background-attachment: fixed;
padding-left: 10%;
padding-right: 10%;
padding-bottom: 30px;
padding-top: 30px;
}

#casestudy2 {width: 80%;
height: auto;
position: relative;
display: none;
background-image: url(../images/paper.png);
background-attachment: fixed;
padding-bottom: 30px;
padding-top: 30px;
padding-left: 10%;
padding-right: 10%;
}
#casestudy3 {width: 80%;
height: auto;
position: relative;
display: none;
background-image: url(../images/paper.png);
background-attachment: fixed;
padding-bottom: 30px;
padding-top: 30px;
padding-left: 10%;
padding-right: 10%;
}
#casestudy4 {width: 80%;
height: auto;
position: relative;
display: none;
background-image: url(../images/paper.png);
background-attachment: fixed;
padding-bottom: 30px;
padding-top: 30px;
padding-left: 10%;
padding-right: 10%;
}
#casestudy5 {width: 80%;
height: auto;
position: relative;
display: none;
background-image: url(../images/paper.png);
background-attachment: fixed;
padding-bottom: 30px;
padding-top: 30px;
padding-left: 10%;
padding-right: 10%;
}








.casebox1 {width: 350px;
height: 350px;
position: relative;
background-color: #ffffff;
float: left;
margin-left: 23px;
margin-right: 23px;
margin-bottom: 50px;
display: table; 
-webkit-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-moz-transition:all 0.4s linear;
transition:all 0.4s linear;
border: 1px solid black;

}


.casebox1:hover {background-color: #000000; color: #FFFFFF;}


.casebox2 {width: 350px;
height: 350px;
position: relative;
background-color: #FFFFFF;
float: left;
margin-left: 23px;
margin-right: 23px;
margin-bottom: 50px;
display: table; 
-webkit-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-moz-transition:all 0.4s linear;
transition:all 0.4s linear;
border: 1px solid black;
}


.casebox2:hover {background-color: #000000; color: #FFFFFF;}




.casebox3 {width: 350px;
height: 350px;
position: relative;
background-color: #FFFFFF;
float: left;
margin-left: 23px;
margin-right: 23px;
margin-bottom: 50px;
display: table; 
-webkit-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-moz-transition:all 0.4s linear;
transition:all 0.4s linear;
border: 1px solid black;
}

.casebox3:hover {background-color: #000000; color: #FFFFFF;}


.casebox4 {width: 350px;
height: 350px;
position: relative;
background-color: #FFFFFF;
float: left;
margin-left: 23px;
margin-right: 23px;
margin-bottom: 50px;
display: table; 
-webkit-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-moz-transition:all 0.4s linear;
transition:all 0.4s linear;
border: 1px solid black;
}

.casebox4:hover {background-color: #000000; color: #FFFFFF;}


.casebox5 {width: 350px;
height: 350px;
position: relative;
background-color: #ffffff;
float: left;
margin-left: 23px;
margin-right: 23px;
margin-bottom: 50px;
display: table; 
-webkit-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-moz-transition:all 0.4s linear;
transition:all 0.4s linear;
border: 1px solid black;
}


.casebox5:hover {background-color: #000000; color: #FFFFFF;}


.boxcover {position: absolute;
width: 100%;
height: 100%;
left:0%;
top:0%;
opacity: 0;
-webkit-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-moz-transition:all 0.4s linear;
transition:all 0.4s linear;
background-image:url(../images/view.png);
background-position: 50% 120%;
background-repeat: no-repeat;

}

.boxcover:hover {opacity: 1;
	
	background-position: center bottom;
	
	
}    
    











.casebox1 p 
 {

 display: table-cell; 
  vertical-align: middle; 
  text-align: center;

}


.casebox2 p 
 {

 display: table-cell; 
  vertical-align: middle; 
  text-align: center;

}


.casebox3 p 
 {

 display: table-cell; 
  vertical-align: middle; 
  text-align: center;

}


.casebox4 p 
 {

 display: table-cell; 
  vertical-align: middle; 
  text-align: center;

}


.casebox5 p 
 {

 display: table-cell; 
  vertical-align: middle; 
  text-align: center;

}


.blur {opacity: 0.2;
	
  box-shadow: 0px 0px 5px 8px rgba(200, 200, 200, 1.000) ;

  -webkit-box-shadow: 0px 0px 5px 8px rgba(200, 200, 200, 1.000) ;

  -moz-box-shadow: 0px 0px 5px 8px rgba(200, 200, 200, 1.000) ;

	
	
}
/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */









/* about */

#top {width: 100%;
height: auto;
position: relative;
margin-top: 70px;
}





/*/////////////////////// contact ////////////////////////// */


.formlength {width: 100%;
height: auto;
padding-top: 50px;
clear: both;
font-family: 'PT Sans', sans-serif; 

}


.formtextholder span {float: left;
width: 30%;
text-align: center;
line-height: 40px;
}

.formtextholder {width: 50%;
float: left;
}

#select1 {
	
}

::-webkit-input-placeholder {
   font-style: italic;
   line-height: 1;
}



:-moz-placeholder {  
   font-style: italic; 
   
}


.formtext {display: block;
outline: none;
width: 60%;
margin-left: 10%;
line-height: 1;
height: 40px;

font-family: 'PT Sans', sans-serif;
font-size: 1em; 
border-bottom: 1px dotted #CCCCCC;
border-top: 0;
border-left: 0;
border-right: 0;
 transition:all 0.2s ease-in-out; 
    -o-transition:all .2s ease-in-out; 
    -moz-transition:all .2s ease-in-out; 
    -webkit-transition:all 0.2s ease-in-out; 
    -webkit-appearance: none;
-webkit-border-radius:0px;
}

.formtext:focus {
	
	border-bottom: 1px solid #5072DE;
	
	
}

.commenttextholder {width: 100%;
float: left;
}


.commentspan {width: 15%;
text-align: center;
float: left;
line-height: 40px;
}


.commenttext { display: block;
outline: none;
width: 80%;
margin-left: 10%;
line-height: 40px;
height: 300px;
font-family: 'PT Sans', sans-serif;
font-size: 1em; 
border: 1px solid #CCCCCC;
-webkit-appearance: none;
	resize: none;
	-webkit-border-radius:0px;
	 transition:all 0.2s ease-in-out; 
    -o-transition:all .2s ease-in-out; 
    -moz-transition:all .2s ease-in-out; 
    -webkit-transition:all 0.2s ease-in-out; 
}
.commenttext:focus {
	
	border: 1px solid #5072DE;
	
	
}



.push_button {
	position: relative;
	width:220px;
	height:40px;
	text-align:center;
	color:#FFF;
	text-decoration:none;
	line-height:40px;
	font-family: 'PT Sans', sans-serif;
	display: block;
	font-size: 1em;
	margin-left: 15%;
	cursor: pointer;
	
}
.push_button:before {
	background:#f0f0f0;
	background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0D0D0), to(#f0f0f0));
	
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	
	-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; 
	-moz-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; 
	box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
	
	position: absolute;
	content: "";
	left: -6px; right: -6px;
	top: -6px; bottom: -10px;
	z-index: -1;
}

.push_button:active {
	-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset;
	top:5px;
}
.push_button:active:before{
	top: -11px;
	bottom: -5px;
	content: "";
}



.blue {
	text-shadow:-1px -1px 0 #2C7982;
	background: #3EACBA;
	border:1px solid #379AA4;
	background-image: -webkit-linear-gradient(#305ef5 0%, #3590ff 100%);
	background-image:-moz-linear-gradient(#305ef5 0%, #3590ff 100%);
	background-image:-ms-linear-gradient(#305ef5 0%, #3590ff 100%);
	background-image:-o-linear-gradient(#305ef5 0%, #3590ff 100%);
	background-image:linear-gradient(#305ef5 0%, #3590ff 100%);	
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	
	-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #5072DE, 0 4px 2px rgba(0, 0, 0, .5);
	-moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #5072DE, 0 4px 2px rgba(0, 0, 0, .5);
	box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #5072DE, 0 4px 2px rgba(0, 0, 0, .5);
}

.blue:hover {
	background: #48C6D4;
	background-image:-webkit-linear-gradient(#3590ff 0%, #305ef5 100%);
	background-image:-moz-linear-gradient(#3590ff 0%, #305ef5 100%);
	background-image:-ms-linear-gradient(#3590ff 0%, #305ef5 100%);
	background-image:-o-linear-gradient(#3590ff 0%, #305ef5 100%);
	background-image:linear-gradient(#3590ff 0%, #305ef5 100%);
}


.thank {padding-left: 5%;}

/*/////////////////////// contact ////////////////////////// */



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

.blocktext {position: absolute;
bottom: 5%;

height:80%;
width: 50%;
font-size: 1em;
}



.navbuttons li a {	
	font-family: 'PT Sans', sans-serif; 

	font-size: 0.7em;
	display: block;
	float: left;
	line-height: 100px;
	height: 100px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	width: 90px;
	}

/* <<<<<<<<<<<<<<<<<Case studies>>>>>>>>>>> */




.casebox1 {margin-left: 95px;
margin-right: 0px;

}

.casebox2 {margin-left: 95px;
margin-right: 0px;

}

.casebox3 {margin-left: 95px;
margin-right: 0px;


}

.casebox4 {margin-left: 95px;
margin-right: 0px;

}

.casebox5 {margin-left: 95px;
margin-right: 0px;

}







/* <<<<<<<<<<<<<<<<<Case studies>>>>>>>>>>> */



}



/* Logo compensation */


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

h1 {font-size: 1.5em;}


	.logocontainer {


line-height: 75px;




}

.navbuttons li a {	
	font-family: 'PT Sans', sans-serif; 
	
	
	display: block;
	float: left;
	line-height: 100px;
	height: 100px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	width: 90px;
	}





.contactf {z-index: 2;
width: 50%;
height: 50px;

position: absolute;
right: 5%;
line-height: 50px;
padding-left: 5%;
text-transform: uppercase;
font-size: 0.9em;
color: #FFFFFF;

}
.contactp {z-index: 2;
width: 30%;
height: 50px;

position: absolute;
left: 5%;
line-height: 50px;
padding-left: 5%;
text-transform: uppercase;
font-size: 0.9em;
color: #FFFFFF;
}







}

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


/* <<<<<<<<<<<<<<<<<Case studies>>>>>>>>>>> */




.casebox1 {margin-left: 35px;
margin-right: 0px;

}

.casebox2 {margin-left: 35px;
margin-right: 0px;

}

.casebox3 {margin-left: 35px;
margin-right: 0px;


}

.casebox4 {margin-left: 35px;
margin-right: 0px;

}

.casebox5 {margin-left: 35px;
margin-right: 0px;

}







/* <<<<<<<<<<<<<<<<<Case studies>>>>>>>>>>> */










}


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

h1 {font-size: 1.4em;}

.navbuttons li a {	
	font-family: 'PT Sans', sans-serif; 
	
	
	display: block;
	float: left;
	line-height: 100px;
	height: 100px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	width: 80px;
	}
	
	.logocontainer {

line-height: 75px;

}


.blocktext {position: absolute;
bottom: 5%;

height:70%;
width: 50%;

}




}






/* iPad and above resolutions */
/* Medium to large screens */
@media screen and (max-width: 768px) {
/* Opening here */



h1 {font-size: 2em;}


#content {position: relative;

min-width: 100%;
margin-left: auto;
margin-right: auto;
height: 100%;


}


.navcontainer {width: 100%;


}
.logocontainer {

height: 100px;
width: 100%;
text-align: center;

line-height: 100px;

float: left;




}

.navbuttons {
position: relative;
height: 100px;
width: 100%;

float: left;

 
}

.navbuttons li a {	
	font-family: 'PT Sans', sans-serif; 
	
	
	display: block;
	
	line-height: 100px;
	height: 100px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	width: 120px;
	
	}

.circle {padding: 2%;


background-color: #14a0f7;
}


.column1 {width: 100%; height: auto; float: none;  padding-top: 5%;
	
	background-image: url(../images/stroke.gif);
	background-position: center top;
	background-repeat: repeat-x;
	

	
}

.column2 {width: 100%; height: auto; float: none;  padding-top: 5%;
	background-image: url(../images/stroke.gif);
	background-position: center top;
	background-repeat: repeat-x;
	

}



.columnrow1 {width: 100%; height: auto; float: none;  padding-top: 5%;
	

	

	
}

.columnrow2 {width: 100%; height: auto; float: none;  padding-top: 5%;

	

}






.column1 h3 {text-transform: uppercase; 
border-top: 0px solid #D0D0D0;
border-bottom: 0px solid #D0D0D0;
padding-top: 0px;
padding-bottom: 0px;

}


.headimage {width: 100%;

}





.line{display: none;}



.contactf {z-index: 2;
width: 50%;
height: 50px;

position: absolute;
right: 5%;
line-height: 50px;
padding-left: 5%;
text-transform: uppercase;
font-size: 0.9em;
color: #FFFFFF;
display: none;
}
.contactp {z-index: 2;
width: 30%;
height: 50px;

position: absolute;
left: 5%;
line-height: 50px;
padding-left: 5%;
text-transform: uppercase;
font-size: 0.9em;
color: #FFFFFF;
display: none;
}



.contactfi {z-index: 2;
width: 50%;
height: 50px;
color: #606060;
position: absolute;
right: 5%;
line-height: 50px;
padding-left: 5%;
text-transform: uppercase;
font-size: 0.9em;

display: block;
}
.contactpi {z-index: 2;
width: 30%;
height: 50px;
color: #606060;
position: absolute;
left: 5%;
line-height: 50px;
padding-left: 5%;
text-transform: uppercase;
font-size: 0.9em;

display: block;
}







.blocktext {position: absolute;
bottom: 5%;

height:70%;
width: 50%;

}

.emailus {display: none;
}



/* <<<<<<<<<<<<<<<<<Case studies>>>>>>>>>>> */




.casebox1 {
width: 250px;
height: 250px;

margin-left: 75px;
margin-right: 0px;

}

.casebox2 {
width: 250px;
height: 250px;
margin-left: 75px;
margin-right: 0px;

}

.casebox3 {
width: 250px;
height: 250px;
margin-left: 75px;
margin-right: 0px;


}

.casebox4 {
width: 250px;
height: 250px;
margin-left: 75px;
margin-right: 0px;

}

.casebox5 {
width: 250px;
height: 250px;
margin-left: 75px;
margin-right: 0px;

}

#casestudy1 {padding-left: 0%;
padding-right: 0%;
width: 100%;
}

#casestudy2 {padding-left: 0%;
padding-right: 0%;
width: 100%;
}

#casestudy3 {padding-left: 0%;
padding-right: 0%;
width: 100%;}

#casestudy4 {width: 100%;
padding-left: 0%;
padding-right: 0%;
}
#casestudy5 {width: 100%;
padding-left: 0%;
padding-right: 0%;
}






/* <<<<<<<<<<<<<<<<<Case studies>>>>>>>>>>> */



/* Closing here */
}
/* Closing here */



/*menu compensation */
@media screen and (max-width: 722px) {

h1 {font-size: 1.7em;}

.navbuttons li a {	
	font-family: 'PT Sans', sans-serif; 

	
	display: block;
	
	line-height: 100px;
	height: 100px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	width: 100px;
	}


.casebox1 {margin-left: 35px;
margin-right: 0px;

}

.casebox2 {margin-left: 35px;
margin-right: 0px;

}

.casebox3 {margin-left: 35px;
margin-right: 0px;

}

.casebox4 {margin-left: 35px;
margin-right: 0px;

}

.casebox5 {margin-left: 35px;
margin-right: 0px;

}

}


/*menu compensation */
@media screen and (max-width: 600px) {




.navbuttons li a {	
	font-family: 'PT Sans', sans-serif; 
	
	
	display: block;
	
		line-height: 100px;
	height: 100px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	width: 90px;
	}
	
	
	
	.casebox1 {
margin-left: 10px;
margin-right: 10px;

}

.casebox2 {
margin-left: 10px;
margin-right: 10px;

}

.casebox3 {
margin-left: 10px;
margin-right: 10px;

}

.casebox4 {margin-left: 10px;
margin-right: 10px;

}

.casebox5 {margin-left: 10px;
margin-right: 10px;

}


}
/*menu compensation */
@media screen and (max-width: 562px) {




.navbuttons li a {	
	font-family: 'PT Sans', sans-serif; 
	color: #FFFFFF;

	display: block;
	
		line-height: 100px;
	height: 100px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	width: 77px;
	}


}





/*menu compensation */
@media screen and (max-width: 560px) {





h1 {font-size: 1.5em;}

.navbuttons ul {float:none;}

.navbuttons ul li {float:none;}

.navbuttons li a {	
	font-family: 'PT Sans', sans-serif; 
	color: #FFFFFF;
	
	display: block;
	text-align:left;
	line-height: 33px;
	height: 33px;
		text-decoration: none;
	text-transform: uppercase;
	width: 40%;
	margin-left: 2%;
	margin-right: 2%;
	margin-top: 2px;
	margin-bottom: 2px;
	padding-left: 6%;
	}
.navbuttons {

height: auto;
width: 100%;



}


body a.home,

body a.about,

body a.contact,

body a.expertise,

body a.casestudies,

body a.capabilities
{

   background-color: #333333;

 background-image:url(../images/arrow_nav_mobile_hover.png);
background-position: 90% 50%;
background-repeat: no-repeat;


  transition:all 0.2s ease-in-out; 
    -o-transition:all .2s ease-in-out; 
    -moz-transition:all .2s ease-in-out; 
    -webkit-transition:all 0.2s ease-in-out; 


}

/* cancel out hover on selected */

body.home a.home:hover,
body.contact a.contact:hover,
body.about a.about:hover,
body.expertise a.expertise:hover,
body.casestudies a.casestudies:hover,
body.capabilities a.capabilities:hover
{  background-color: #333333;
color:#FFFFFF;

}


body a.home:hover,
body a.about:hover,
body a.contact:hover,
body a.expertise:hover,
body a.casestudies:hover,
body a.capabilities:hover 

{background-color: #333333;
background-image:url(../images/arrow_nav_mobile_hover.png);
background-position: 95% 50%;
background-repeat: no-repeat;


}

body.home a.home,
body.contact a.contact,
body.about a.about,
body.expertise a.expertise,
body.casestudies a.casestudies,
body.capabilities a.capabilities {background-image:url(../images/arrow_nav_mobile_selected.png);
background-position: 90% 50%;
background-repeat: no-repeat;}


.contactfi {z-index: 2;
width: 50%;
height: 50px;

position: absolute;
right: 5%;
line-height: 50px;
padding-left: 5%;
text-transform: uppercase;
font-size: 0.9em;

display: none;
}
.contactpi {z-index: 2;
width: 30%;
height: 50px;

position: absolute;
left: 5%;
line-height: 50px;
padding-left: 5%;
text-transform: uppercase;
font-size: 0.9em;

display: none;
}



.blocktext {position: absolute;
bottom: 5%;

height:75%;
width: 100%;

}

.imagest {position: absolute;
bottom: 5%;
display: none;

}

.emailus {width: 200px;
height: 200px;
background-image: url(../images/emails.png);
position: absolute;
top: 0%;
right: 0%;
display:none;
}
.hid {display: block;}

/* <<<<<<<<<case study>>>>>>>>>*/

.cases p{font-size: 1em;}

.cases p:first-letter { font-size: 3em; color: #000000; line-height: 1em; float: left; padding-right: 0.3em;}






.casebox1 {width: 90%;
height: 300px;
float: none;
margin-left: auto;
margin-right: auto;}

.casebox2 {width: 90%;
height: 300px;
float: none;
margin-left: auto;
margin-right: auto;}

.casebox3 {width: 90%;
height: 300px;
float: none;
margin-left: auto;
margin-right: auto;
}

.casebox4 {width: 90%;
height: 300px;
float: none;
margin-left: auto;
margin-right: auto;
}

.casebox5 {width: 90%;
height: 300px;
float: none;
margin-left: auto;
margin-right: auto;

}

/* <<<<<<<<<case study>>>>>>>>>*/





/*CONTACT*/

.formlength {
padding-top: 0px;
}

.formtextholder {width: 100%;
padding-top: 50px;
float: none;

}
.formtextholder span {float: none;
display: block;
margin: 0 auto;
}

.formtext {margin: 0 auto;
	border: 1px dotted #CCCCCC;
	line-height: 1;
}

.formtext:focus {
	
	border: 1px solid #5072DE;
	
	
}
.commentspan {width: 30%;
text-align: center;
float: none;
display: block;
margin: 0 auto;
}

.commenttextholder {width: 100%;
float: none;

padding-top: 50px;
}
.commenttext { display: block;
outline: none;
width: 80%;
margin: 0 auto;

font-family: 'PT Sans', sans-serif;
font-size: 1em; 
border: 1px dotted #CCCCCC;

}

#select1 {margin-left: 30%;
	
	
	
	
}

.push_button {
width: 150px;
	margin-left: 30%;

	margin-top: 50px;
}


/*CONTACT*/



/* closing */
}

/* closing */




/* iPhone - iPad resolutions */
/* Small screen only */
@media screen and (max-width: 480px) {
/* Opening here */



h1 {font-size: 2em; }
h2 {font-size: 1.5em; margin: 0; padding: 0; padding-top: 5%;}
p {padding-top: 5%;}


#content {position: relative;

min-width: 100%;
margin-left: auto;
margin-right: auto;
height: 100%;

}





.navcontainer {width: 100%;
position: relative;
height: auto;

}

.logocontainer {

height: 100px;
width: 100%;
line-height: 75px;


}

.navbuttons {
height: auto;
width: 100%;



}



.headimage {display:none;
}


.mobileheader {width: 100%;
margin-left: auto;
margin-right: auto;

height: auto;
display: block;

padding-bottom: 5%;
}


.mobileheader h2 {text-align: center;}
.copyright {width: 100%;
height: 50px;
position: absolute;
bottom: 0px;
text-align: center;
font-size: 0.7em;
}






/* Closing here */
}
/* Closing here */