/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */


@import url(http://fonts.googleapis.com/css?family=Fauna+One);



html,
button,
input,
select,
textarea {
    color: #333;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-family: 'Fauna One', georgia, serif;   
    background: #FFF;
}


html {
    font-size: 1em;
    line-height: 1.4;
	-webkit-font-smoothing: antialiased;
}



/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #333;
    margin: 10px 0 30px 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}


/*
 * Hide.
 */

.hide {
    position: absolute;
    left: -9999px;
}

a{
	text-decoration: none;
	outline: none;
	}
	

.orange{
	color: #ed1e79;
	}	
	
.clearLeft{
	clear: left;
	}
	
.clearRight{
	clear: right;
	}	
	
.btn{
	display: inline-block;
	padding: 7px 15px;
	color: #FFF;	
	background: #ed1e79;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border: none;
	-webkit-box-shadow: 1px 1px 0px 0px #999;
	-moz-box-shadow:    1px 1px 0px 0px #999;
	box-shadow:         1px 1px 0px 0px #999;
	cursor: pointer;
	behavior: url("pie/PIE.htc");
    -webkit-transition: background-color 150ms ease-in-out;
    -moz-transition: background-color 150ms ease-in-out;
    -o-transition: background-color 150ms ease-in-out;
    transition: background-color 150ms ease-in-out;	
    -webkit-transition: color 150ms ease-in-out;
    -moz-transition: color 150ms ease-in-out;
    -o-transition: color 150ms ease-in-out;
    transition: color 150ms ease-in-out;	    	
	}		
		
		
.btn:hover{
	color: #ed1e79;	
	background: #FFF;
	}
	
.screen-reader {
  display: block !important;
  left: -9999px !important;
  position: absolute !important;
}	
		

/* ==========================================================================
   Custom styles
   ========================================================================== */

.row{
	float: left;
	width: 100%;
	text-align: center;
	position: relative;	
	}
	
	
.row .inner{
	width: 960px;
	text-align: left;
	margin: 0 auto;
	padding: 0 0 0 0;
	}
	


.centered .inner{
	text-align: center;
	}

/*-- fix top menu --*/


body{
	padding: 155px 0 0 0;
}

#header{
	background: #7a99b6;
	height: 101px;
	position: fixed;
	z-index: 700;	
	top: 0;
	}
	
#header .inner{
	position: relative;
	}	
	
.klarifiPage #header{
	background: #FFF;
}	

.blueprintPage #header{
	background: #7a99b6 url("../images/assets/blueprint-bg.png") no-repeat 45% 0;
}	

#nav{
	top: 101px;
	height: 50px;
	position: fixed;
	z-index: 300;
	}
	
	
/*-- header --*/	

#logo{
	float: left;
	margin: 5px 0 0 0;
	}
	
#logo img{
	}	
	
	
#dropdown{
	float: right;
	position: relative;
	margin: 35px 0 0 0;	
	}

#dropdown dt{
	float: left;
	background: #fff;
	background-color:rgba(255,255,255,1);
	width: 280px;
	padding: 0 10px;
	height: 34px;
	line-height: 34px;
	border: 1px solid #666;	
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	cursor: pointer;
	}
	
#dropdown dt i{
	float: right;
	font-size: 18px;
	color: #666;
	margin: 9px 0 0 0;
	}	
	
#dropdown dd{
	position: absolute;
	top: 31px;
	left: -9999px;
	opacity: 0;
	background: #FFF;
	border: 1px solid #666;	
	border-top: none;
	-webkit-border-bottom-right-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-moz-border-radius-bottomright: 3px;
	-moz-border-radius-bottomleft: 3px;
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
	padding: 10px 10px 0px 10px;
	width: 280px;
	-webkit-transition: opacity 200ms linear;
	-moz-transition: opacity 200ms linear;
	-o-transition: opacity 200ms linear;
	transition: opacity 200ms linear;
	}
	
#dropdown:hover dd{
	left: 0;
	opacity: 1;	
	}	
	
#dropdown dd p{
	padding: 0 0 10px 0;

	}
	
#dropdown dd p a{display: block;}
	
#dropdown dd p a.klarifi{color:#2B2E35;}
#dropdown dd p a.blueprint{color:#7898B6;}
#dropdown dd p a.ltf{color:#EE1C79;}	

#dropdown dd p a:hover,
#dropdown dd p.here a{font-weight: bold;}
		
#dropdown dd:hover{
	left: 0;
	}		

#help{
	float: right;
	width: 298px;
	margin: 25px 0 12px 0;
	border: 1px solid #FFF;
	}
	
#help li{
	float: left;
	width: 33.333%;
	}	

#help li a{
	float: left;
	height: 52px;
	line-height: 52px;
	width: 100%;
	text-align: center;
	padding: 0;
	font-size: 17px;
	color: #FFF;
	position: relative;
	}
	
#help li.define a{background: #;}
#help li.explain a{background: #2b2e36;}
#help li.execute a{background: #ed1e79;}


.klarifiPage #help li.define a{background: #7899b6;} 
.blueprintPage #help li.define a{background: #7899b6;} 


#help li a span{
	display: none;
	position: absolute;
	top: 5px;
	right: 5px;
	z-index: 1000;
	background: #FFF;
	width: 10px;
	height: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	}

#help li.here a span,
#help li a:hover span{
	display:block;
	}

#menu{
	display: none;
	}
	
#flags{
	position: absolute;
	top: 5px;
	right: 0;
	}	
	
	
#flags img{
	height: 20px;
	width: auto;
	opacity: 0.3;
    filter: alpha(opacity=30); /* For IE8 and earlier */	
	-webkit-transition: opacity 200ms linear;
	-moz-transition: opacity 200ms linear;
	-o-transition: opacity 200ms linear;
	transition: opacity 200ms linear;
	}
	
#flags .here img{
	opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
	}	
	
#flags a:hover img{
	opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
	}	

/*-- nav --*/

#nav{
	background: #4D4D4D;
	}


#nav .inner{	
	position: relative;	
}



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

#navigation{
	float: left;
	position: relative;
	z-index: 1000;
	}	
	
#navigation li{
	float: left;
	position: relative;
	}	
	
#navigation > li > a{
	float: left;
	padding: 0 12px;
	height: 50px;
	line-height: 50px;
	color: #FFF;
	font-size: 18px;
    -webkit-transition: background-color 150ms ease-in-out;
    -moz-transition: background-color 150ms ease-in-out;
    -o-transition: background-color 150ms ease-in-out;
    transition: background-color 150ms ease-in-out;			
	}	


	
#navigation #nav-sub-home a{
	float: left;
	width: 20px;
	text-indent: -9999px;
	background: url("../images/assets/icon-home.png") no-repeat 50% 50%;
	background-image: linear-gradient(transparent, transparent),url("../images/assets/icon-home.svg");
	}
	
#navigation > li:hover > a,
#navigation > li.here > a,
#navigation > li.parent-here > a{
	background-color: #ed1e79 !important;
	}		


#navigation > li > ul{
	position: absolute;
	left: -9999px;
	z-index: 2000;
	background: #666666;
	top: 50px;
	padding: 0px 0 0 0;
	opacity: 0;
	-webkit-transition: opacity  0.4s linear;
    -moz-transition: opacity  0.4s linear;
    -o-transition: opacity  0.4s linear;
    transition: opacity  0.4s linear;		
	}
	
#navigation > li:hover > ul{
	left: 0;
	opacity: 1;		
	}	
	
#navigation > li > ul > li > a{
	float: left;
	width: 180px;
	color: #FFF;
	padding: 8px 20px 8px 20px;
	}	
	
	
#navigation > li > ul > li > a:hover,
#navigation > li > ul > li.here > a,
#navigation > li > ul > li.parent-here > a,
#navigation > li > ul > li:hover > a,
#navigation > li > ul > li > ul > li > a:hover{
	background: #ed1e79;
}



#navigation > li > ul > li > ul{
	position: absolute;
	left: -9999px;
	z-index: 2000;
	background: #666666;
	top: 0;
	padding: 0px 0 0 0;
	opacity: 0;
	-webkit-transition: opacity  0.4s linear;
    -moz-transition: opacity  0.4s linear;
    -o-transition: opacity  0.4s linear;
    transition: opacity  0.4s linear;		
	}
	
#navigation > li:hover > ul > li:hover > ul{
	left: 220px;
	opacity: 1;		
	}
	
	
#navigation > li > ul > li > ul > li > a{
	float: left;
	width: 180px;
	color: #FFF;
	padding: 8px 20px 8px 20px;
	}		



}	

#call{
	float: right;
	position: relative;
	}	


#call a{
	color: #FFF;
	font-size: 22px;
	height: 50px;
	line-height: 50px;	
	cursor: default;
}

.homepage #call a{

	}



#breadcrumb{
	float left;
	width: 100%;
	font-size: 14px;
	padding: 10px 0;
	color: #4D4D4D;
	}

#breadcrumb a{
	color: #4D4D4D;
	}
	
#breadcrumb span{
	color: #ed1e79;
}	
	

/*-- showcase --*/

.strapline{
	float: left;
	width: 100%;
	position: absolute;
	top:0;
	left: 0;
	height: 157px;
	z-index: 150;
	color: #FFF;
	background: url("../images/assets/strapline-bg.png");
}

#showcase .strapline{
	top:330px;
	left: 0;
	}


#pageHeader .strapline{
	height: 136px;
	overflow: hidden;
	}

.strapline h1,
.strapline h3{
	font-size: 50px;
	line-height: 1em;
	padding: 30px 0 0 0;
	}
	
	
#pageHeader .strapline h1{	
	font-size: 50px;
	padding: 45px 0 0 0;
	}
	
	
.strapline h4{
	font-size: 38px;
	}

.strapline img{
	float: left;
	position: absolute;
	top: 0;
	left: 0;
	}


#slider{
	position: relative;
	}

#slider .slides li{
	float: left;
	width: 100%;
	padding: 600px 0 0 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0 0;
}


#slider .slides li .about{
	float: left;
	width: 50%;
	padding: 60px 25% 40px 25%;
	background: url("../images/assets/about-bg.png") no-repeat 50% 0;
}


#slider .slides li .about h5{
	font-size: 19px;
	color: #4473b3;
	padding: 0 0 20px 0;
	}

#slider .slides li .about p{
	font-size: 17px;
	}


#slider .flex-control-nav{
	float:right;
	position: absolute;
	top: 620px;
	right:20px;
	}


#slider .flex-control-nav li{
	float: left;
	padding: 0 0 0 10px;
	cursor: pointer;
	}


#slider .flex-direction-nav .flex-prev,
#thumbnailSlider .flex-direction-nav .flex-prev{
	position: absolute;
	bottom: -101px;
	left: 20px;
	float: left;
	width: 28px;
	height: 32px;
	text-indent: -9999px;
	z-index: 200;
	background: url("../images/assets/slider-arrows.png") no-repeat 0 0;
	}

#slider .flex-direction-nav .flex-next,
#thumbnailSlider .flex-direction-nav .flex-next{
	position: absolute;
	bottom: -101px;
	right: 40px;
	float: left;
	width: 28px;
	height: 32px;
	text-indent: -9999px;	
	z-index: 200;	
	background: url("../images/assets/slider-arrows.png") no-repeat -28px 0;	
	}

#thumbnailSlider .flex-direction-nav .flex-prev,
#thumbnailSlider .flex-direction-nav .flex-next{
	bottom: 70px;
	}
	
#slider .flex-control-nav li a{
	float: left;
	width: 9px;
	height: 9px;
	background: #333333;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;	
	text-indent: -9999px;
	behavior: url("pie/PIE.htc");
	}
	
#slider .flex-control-nav li a.flex-active{
	background: #ed1e79;
}	


#results{
	width: 60%;
	padding: 20px 20%;
	background: #E6E6E6;
	position: relative;
	}
	
#carousel{

}	

#carousel .flex-control-nav{
	display: none;
}


#carousel .flex-direction-nav{
	display: none;
	}


#carousel .slides li{
	position: relative;
	}

#carousel .slides li img{
	border: 1px solid #799AB7;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;	
	margin: 0 20px;	
	behavior: url("pie/PIE.htc");
}


#carousel .slides li .btn{
	position: absolute;
	top: 45px;
	left: -9999px;
	width: 190px;
	font-size: 22px;
	}


#carousel .slides li.flex-active-slide .btn{
	left: 10px;
	}
	
	
#thumbnailSlider .slides li img{
	border: 2px solid #799AB7;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;	
	margin: 0 20px 3px 20px;	
	-webkit-box-shadow: 3px 3px 0px 0px #E6E6E6;
	-moz-box-shadow:    3px 3px 0px 0px #E6E6E6;
	box-shadow:         3px 3px 0px 0px #E6E6E6;
	behavior: url("pie/PIE.htc");	
}


#thumbnailSlider .slides li img:hover{
	border-color: #ed1e79;
	-webkit-box-shadow: 3px 3px 0px 0px #ccc;
	-moz-box-shadow:    3px 3px 0px 0px #ccc;
	box-shadow:         3px 3px 0px 0px #ccc;		
	}	


/*-- pageHeader --*/	

#pageHeader{
	background-size: cover;
	background-position: 0 0;
	}
	
	
#pageHeader .mask{
	float: left;
	width: 100%;
	height: 320px;	
	background: url("../images/assets/pageHeader-bg.png") no-repeat 50% 100%;
	}	

#pageHeader .blogImage{
	float: left;
	width: 100%;
	height: 355px;
	}	

#pageHeader .titleOnly{
	height: 136px;
	}

#pageHeader .withQuote{
	height: auto;
	}

#pageHeader blockquote{
	margin: 200px auto 70px auto;
	width: 840px;
	padding: 50px;
	background: url("../images/assets/strapline-bg.png");
	color: #FFF;
	font-size: 21px;
	}
	
	
#pageHeader blockquote p{
	padding: 0 0 20px 0;
	}	



/*-- intro --*/

#intro .inner{
	text-align: center;
	position: relative;
	}
	

#intro .inner h1{
	font-size: 64px;
	color: #799AB7;
	padding: 0 0 30px 0;
	}
	
	
#intro .inner p{
	font-size: 18px;
	line-height: 1.5em;
	width: 70%;
	padding: 0 15% 0 15%;
	}	

#intro .inner h6{
	position: absolute;
	bottom: 20px;
	left: 0;
	}



/*-- text --*/

.text{
	padding: 50px 0 40px 0;
	}


.padded .inner{
	width: 800px;
	margin: 0 auto;
	}
	
.intro{
	padding: 20px 0 0 0;
	margin: 0 0 30px 0;
	border-top: 1px solid #FFF;
	}
	
.steps{
	padding: 20px 0 20px 0;
	border-top: 1px solid #FFF;
	}	

.arrowWhite{
	background: url("../images/assets/arrow-white.png") no-repeat 50% 0;
	}

.arrowBlue{
	background: url("../images/assets/arrow-blue.png") no-repeat 50% 0;
	}

.blue{
	background-color: #799AB7;
	}

.grey{
	background-color: #333;
	}
	

.green{
	background-color: #7EC327;	
	}

.summary{
	padding: 20px 0 10px 0;
	margin: 0;
	clear: both;
	}

.text .inner{
	position: relative;
	}	

.text h2,
.text h3{
	font-size: 36px;
	padding: 0 0 30px 0;
	color: #799AB7;	
	}
	
.text p{
	font-size: 17px;
	padding: 0 0 20px 0;
	line-height: 1.6em;
	}	
	
	



.text ul{
	padding: 0 0 10px 0;
	}
	
.text ul li{
	font-size: 17px;
	padding: 0 0 10px 15px;
	line-height: 1.6em;
	background: url("../images/assets/bullet-orange.png") no-repeat 0 10px;
	}		
	
.blue h3,
.blue p,
.blue li,
.grey h3,
.grey p,
.grey li,
.green h3,
.green p,
.green li{	
	color: #FFF;
	}
	
	
.blue .btn{
	color: #FFF;
	-webkit-box-shadow: 2px 2px 0px 0px #ccc;
	-moz-box-shadow:    2px 2px 0px 0px #ccc;
	box-shadow:         2px 2px 0px 0px #ccc;	
}

	
.text .download{
	position: absolute;
	top: -20px;
	right: 0;
	}	

.text a{
	color: #e9257a;
	}


.text .download a i{
	font-size: 20px;
	}
	
	
.text ol.versions li{
	display: inline-block;
	margin: 0 10px 20px 0;
	}
	
	
.text blockquote{
	display: block;
	text-align: center;
	width: 60%;
	margin: 30px auto 20px auto;
	background: url("../images/assets/quote-orange-left.png") no-repeat 0 0;	
	}
	
.text blockquote span{
	display: block;
	padding: 0 35px 0 35px;
	background: url("../images/assets/quote-orange-right.png") no-repeat 100% 80%;
	}	
	
.text blockquote cite{
	color: #ed1e79;
	}
	
u{
	background: #E6007E;
	color: #FFF;
	text-decoration: none;
	padding: 0 5px;
	display: inline-block;
	}
	
.text p a{
	color: #E6007E;
	font-weight: bold;
	background: #FFF;
	padding: 0 5px;
	display: inline-block;
	}

.text p a:hover{
	color: #FFF;
	background: #E6007E;
	}			
	
.filters{
	padding: 10px 0 0 0;
	border-top: 1px solid #FFF;
	border-bottom: 1px solid #FFF;
	}	
	

.filters dl{
	float: left;
	width: 100%;
	font-size: 14px;
	color: #fff;
	}			

.filters dt{
	float: left;
	width: 10%;
	height: 50px;
	}
	
.filters dd{
	float: left;
	width: 30%;
	}
	

	
.text .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}


.text .video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}	
		

/*-- examples --*/


#examples{
	position: relative;
	z-index: 200;
	background: #799AB7;
	}

#examples .flex-control-paging{display:none;}


#examples .details{
	float: left;
	width: 100%;
	padding: 0 0 50px 0;
	background: #FFF;
	}

#examples .details img{
	float: left;
	width: 100%;
	height: auto;
	z-index: 99;
	}
	
#examples .details span{
	float: left;
	width: 55%;
	margin: -70px 0 0 0;
	z-index: 100;
	}	


#examples .details span h3{
	font-size: 22px;
	padding: 0 0 15px 0;
	}	
	
#examples .details span p{
	font-size: 17px;
	color: #666;
	padding: 10px;
	background: #FFF;
	background: rgba(255, 255, 255, 0.8);
	}
	
#examples .details span h4{
	font-size: 17px;
	color: #666;
	padding: 20px 0 0 0;
	}			
	
#examples .buttons{
	float: right;
	}	

#examples .buttons a{
	float: left;
	margin: 0 0 0 20px;
	}

#examples .quote{
	float: left;
	width: 100%;
	text-align: center;
	background: #333;
	color: #FFF;
	padding: 20px 0 25px 0;
	}
	
#examples blockquote{
	display: inline-block;
	width: 480px;
	padding: 10px 0 0 40px;
	margin: 0 70px;
	font-size: 17px;
	background: url("../images/assets/quote-left.png") no-repeat 0 10px;
	}	
	
	
#examples blockquote span{	
	display: inline-block;
	width: 480px;
	padding: 0 40px 0 0;
	background: url("../images/assets/quote-right.png") no-repeat 100% 80%;
	}
	

#examples blockquote p,
#examples blockquote cite{
	padding: 0 0 0px 0;
	line-height: 1.6em;
	}		
	
	
#examples blockquote cite{
	color: #799AB7;
	}	


#examples .versions{
	float: left;
	width: 100%;
	text-align: center;	
	background: #799AB7;
	color: #FFF;
	padding: 15px 0 0 0;
	}
	
#examples .versions dt,
#examples .versions dd{
	float: left;
  	height: 32px;
  	line-height:32px;	
	}

#examples .versions dt{margin: 0 10px 15px 0;}
	
#examples .versions dd {
	position: relative;
	float: left;
	width: 38px;
	height: 32px;
	margin: 0 15px 15px 0;
	background: url("../images/assets/service-icons.png") no-repeat 0 0;
}


#examples .versions dd.service1{background-position: 0 0;}
#examples .versions dd.service2{background-position: -38px 0;}
#examples .versions dd.service3{background-position: -76px 0;}
#examples .versions dd.service4{background-position: -114px 0;}
#examples .versions dd.service5{background-position: -152px 0;}
#examples .versions dd.service6{background-position: -190px 0;}
#examples .versions dd.service7{background-position: -228px 0;}


#examples .versions dd span {
  position: absolute;
  width:180px;
  color: #333333;
  background: #FFFFFF;
  text-align: center;
  visibility: hidden;
  border-radius: 6px;
  box-shadow: 2px 2px 2px #666666;
  behavior: url("pie/PIE.htc");
}
#examples .versions dd span:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;
  border-top: 8px solid #FFFFFF;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
#examples .versions dd:hover span {
  visibility: visible;
  opacity: 0.8;
  bottom: 40px;
  left: 50%;
  margin-left: -90px;
  z-index: 999;
}	


#examples .flex-direction-nav .flex-prev{
	position: absolute;
	top: 240px;
	left: 0px;
	float: left;
	width: 61px;
	height: 124px;
	text-indent: -9999px;
	z-index: 200;
	background: url("../images/assets/more-arrows.png") no-repeat 0 0;
	}

#examples .flex-direction-nav .flex-next{
	position: absolute;
	top: 240px;
	right: 0;
	float: left;
	width: 61px;
	height: 124px;
	text-indent: -9999px;	
	z-index: 200;	
	background: url("../images/assets/more-arrows.png") no-repeat -61px 0;	
	}
	
	
#examples .flex-control-nav{
	position: absolute;
	bottom: -30px;
	right: 20px;
	z-index: 300;
	}

#examples .flex-control-nav li{
	float: left;
	margin: 0 0 0 10px;	
	}
	
#examples .flex-control-nav li a{
	float: left;
	text-indent: -9999px;
	width: 9px;
	height: 9px;
	background: #BCCDDD;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	cursor: pointer;
	}
	
#examples .flex-control-nav li a.flex-active{	
	background: #FFF;
	}





/*-- client --*/

#client{
	padding: 30px 0 10px 0;
	}

#client .logo{
	display: inline-block;
	}


#client a{
	color: #ed1e79;
	}

#client p{
	font-size: 17px;
	padding: 10px 0 20px 0;
	}
	

#client .btn{
	color: #FFF;
	font-size: 22px;
	}


/*-- award --*/

#award{
	padding: 30px 0 30px 0;
	}


#award img{
	padding: 0 20px 0 0;
	}
	


/*-- clientList --*/


#clientList {
	padding: 0 0 30px 0;
	}

#clientList ul{
	float: left;
	width: 100%;
	margin: 0 0 10px 0;
	}

#clientList li{
	float: left;
	width: 220px;
	height: 125px;
	margin: 0 26px 26px 0;
	line-height: 125px;
	text-align: center;
	background: #4D4D4D;
	}
	

#clientList li.last{
	margin-right: 0;
	}		
	

#clientList li a{	
	float: left;
	width: 220px;
	height: 125px;
	background: #4D4D4D;
	position: relative;
    -webkit-transition: background-color 150ms ease-in-out;
    -moz-transition: background-color 150ms ease-in-out;
    -o-transition: background-color 150ms ease-in-out;
    transition: background-color 150ms ease-in-out;		
	}
	
#clientList li a:hover{
	background: #799AB7;
	}		

#clientList li a:hover i{
	color: #FFF;
	}	
	
#clientList li a i{
	position: absolute;
	bottom: 10px;
	right: 10px;
	color: #ed1e79;
	font-size: 22px;
	}		


	
#clientList p i{
	font-size: 20px;
	margin: 0 5px 0 0;
	}



/*-- serviceList --*/


#serviceList {
	padding: 0 0 30px 0;
	}

#serviceList ul{
	float: left;
	width: 100%;
	}

#serviceList li{
	float: left;
	width: 280px;
	margin: 0 20px 40px 20px;
	position: relative;
	}
	
#serviceList li img{
	width: 100%;
	height: auto;
	-webkit-transition: opacity  0.4s linear;
    -moz-transition: opacity  0.4s linear;
    -o-transition: opacity  0.4s linear;
    transition: opacity  0.4s linear;			
	}	
	
#serviceList li h4{
	color: #333;
	font-size: 22px;
	padding: 10px 0 5px 0;
	-webkit-transition: color  0.4s linear;
    -moz-transition: color  0.4s linear;
    -o-transition: color  0.4s linear;
    transition: color  0.4s linear;	
	}	
	
#serviceList li p{
	color: #666;
	font-size: 15px;
	}


#serviceList li a:hover img{
	opacity: 1;	
	}
	
#serviceList li a:hover img{
	opacity: 0.7;		
	}	


#serviceList li a:hover h4{	
	color: #ed1e79;
	}
	
#serviceList li p .btn{
	margin-top: 10px;
	}

#serviceList .quick{
	display: block;
	text-align: center;
	}

#serviceList .quick span{
	display: inline-block;
	padding: 7px 0;
	margin: 0 0 0 -70px;
	width: 140px;
	color: #FFF;	
	background: #000;
	background: rgba(0,0,0,0.7);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	position: absolute;
	top: 52px;
	left: -9999px;
	z-index: 500;
	opacity: 0;
	-webkit-transition: opacity  0.4s linear;
    -moz-transition: opacity  0.4s linear;
    -o-transition: opacity  0.4s linear;
    transition: opacity  0.4s linear;
    behavior: url("pie/PIE.htc");	
	}
	
#serviceList .quick:hover span{
	left: 50%;
	opacity: 1;	
	}	

#serviceList a.popup{
	position: relative;
	display: block;
	}	
	
#serviceList a.popup i.fa-search{
	position: absolute;
	bottom: 0;
	left: 0;
	float: left;
	color: #FFF;
	width: 25px;
	height: 25px;
	line-height: 25px;
	font-size: 13px;
	text-align: center;
	background: #999999;
	-webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;						
	}
	
	
#serviceList a.popup:hover i.fa-search{	
	background: #000;
	width: 35px;
	height: 35px;
	line-height: 35px;
	font-size: 16px;					
	}	
	
	
#serviceList .whiteFade{
	float: left;
	width: 100%;
	z-index: 100;
	height: 56px;
	position: absolute;
	bottom: -20px;
	left: 0;
	background: url("../images/assets/fade.png") repeat-x 0 100%;
}		
	

.inline{
	display: none;
	width: 100%;
	max-width: 700px;
	text-align: center;	
	padding: 40px 0 0 0;
	}
	
.inline h3{
	font-size: 36px;
	padding: 10px 40px 0 40px;
	}			

.inline h4{
	font-size: 20px;
	color: #7899b6;
	padding: 0 40px 30px 40px;
	}

.inline h5{
	font-size: 18px;
	padding: 0 40px 20px 40px;
	text-align: left;
	}

.inline p{
	font-size: 15px;
	padding: 0 40px 20px 40px;
	text-align: left;
	}
	
.inline a{
	color: #333;
	text-decoration:underline;
	}	

.inline a:hover{
	text-decoration: none !important;
	}	

.inline a.btn{
	color: #FFF;
	text-decoration: none !important;
	}	

.inline ul{
	float: left;
	font-size: 14px;
	text-align: left;
	width: 290px;
	}

.inline ul.listCol1{
	padding: 0 20px 20px 40px;
	}	
	
.inline ul.listCol2{
	float: right;
	padding: 0 40px 20px 20px;
	}	
	
.inline ul li{
	padding: 0 0 10px 15px;
	line-height: 1.4em;
	background: url("../images/assets/bullet-orange.png") no-repeat 0 8px;
	}	
	
	
.inline .book{
	float: left;
	width: 100%;
	padding: 30px 0;
	text-align: center;
	background: #DDE6ED;
	font-size: 22px;
	}
	
	
.inline .fncy-custom-close{
	font-size: 17px;
	color: #7899b6;
	float: right;
	margin: 25px 40px 0 -40px;
	}
	

/*-- more --*/

#more img{

	}
	
#more img.shadow{
	border-right: none;
	width: 100%;
	height: 14px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 400;
	}	


#more .flex-direction-nav .flex-prev{
	position: absolute;
	bottom: 0px;
	left: 0px;
	float: left;
	width: 61px;
	height: 124px;
	text-indent: -9999px;
	z-index: 200;
	background: url("../images/assets/more-arrows.png") no-repeat 0 0;
	}

#more .flex-direction-nav .flex-next{
	position: absolute;
	bottom: 0px;
	right: 15px;
	float: left;
	width: 61px;
	height: 124px;
	text-indent: -9999px;	
	z-index: 200;	
	background: url("../images/assets/more-arrows.png") no-repeat -61px 0;	
	}
	


	


/*-- controls --*/


#controls img{
	border-right: 1px solid #6C8AA3;
	}	

#controls img.shadow{
	border-right: none;
	width: 100%;
	height: 14px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 400;
	}

#controls .flex-direction-nav .flex-prev{
	position: absolute;
	bottom: 0px;
	left: 0px;
	float: left;
	width: 61px;
	height: 124px;
	text-indent: -9999px;
	z-index: 200;
	background: url("../images/assets/more-arrows.png") no-repeat 0 0;
	}

#controls .flex-direction-nav .flex-next{
	position: absolute;
	bottom: 0px;
	right: 0;
	float: left;
	width: 61px;
	height: 124px;
	text-indent: -9999px;	
	z-index: 200;	
	background: url("../images/assets/more-arrows.png") no-repeat -61px 0;	
	}


/*-- people --*/

#people{
	padding: 30px 0 30px 0;
	}

#people .inner{
	text-align: center;
	}
	

#people .inner h1{
	font-size: 64px;
	color: #799AB7;
	padding: 0 0 30px 0;
	}

#people .profiles{
	float: left;
	width: 100%;
	}	
	

#people .profiles li{
	float: left;
	width: 100%;
	}	
	
#people .profiles li li{
	float: left;
	width: 240px;
	padding: 0 40px;
	min-height: 260px;
	margin: 0 0 60px 0;
	position: relative;
	}
	
	
#people .profiles li li img.arrow{
	position: absolute;
	bottom: -25px;
	left: 50%;
	margin: 0 0 0 -15px;
	z-index: 200;
}	

#people .profiles li.people3{
	clear: right;
	}	
	

#people .profiles li img.photo{	
	border: 3px solid #799AB7;
	-webkit-border-radius: 86px;
	-moz-border-radius: 86px;
	border-radius: 86px;
	cursor: pointer;
	behavior: url("pie/PIE.htc");
	}		
	

#people .profiles li h3{
	font-size: 22px;
	padding: 10px 0 0 0;
	}		

#people .profiles li h4{
	font-size: 17px;
	color: #799AB7;	
	}
	
	
#people .profiles li .about{
	float: left;
	background: #799AB7;
	padding: 10px 10px 0 10px;
	margin: 15px 0 0 0;
	color: #FFF;
	}
	
#people .profiles li .about p,
#people .profile p{
	padding: 0 0 10px 0;
	color: #FFF;	
	}	
	
#people .profiles li .about p a,
#people .profile p a{
	color: #FFF;
	text-decoration: underline;
	}
	
#people .profiles li .about p a:hover{
	text-decoration: none;
	}	
	
#people .profile{
	display: none;
	float: left;
	width: 90%;
	padding: 30px 5% 10px 5%;
	background: #799AB7 url("../images/assets/shadow-top.png") repeat-x 0 0;	
	margin: -50px 0 40px 0;
	text-align: left;
	}



/*-- #blueprint --*/


#blueprint{
	padding:1px 0 40px 0;	
	}

#blueprint .inner{
	width: 960px;
}

#blueprint .inner .content{
	float: left;
	width: 600px;
	padding: 40px 0 0 0;
}	


#blueprint .inner .sidebar{
	float: right;
	width: 270px;
	padding: 40px 15px 0 15px;	
	background: #7a99b6;
	color: #FFF;
}	



#blueprint .inner .sidebar form h4{
	font-size: 20px;
	padding: 0 0 30px 0;
	color: #FFF !important;
}

#blueprint .inner .sidebar form .field{
	padding: 0 0 10px 0;
}

#blueprint .inner .sidebar form .field input{
	font-size: 16px;
	}

#blueprint .inner .sidebar form .field input{
	border: none;
	width: 90%;
	padding: 5px 5%;
}

#blueprint .inner .sidebar form h5{
	font-size: 18px;
	padding: 0 0 10px 0;
	}


#blueprint .inner .sidebar .mailingList{
	text-align: center;
	font-size: 13px;
	}


#blueprint .inner .submit{
	text-align: center;	
	}


/*-- blueprintForm --*/	

#blueprintForm{
	float: left;
	width: 100%;
	position: relative;
	font-size: 18px;
	margin: 30px 0 0 0;
	background: url("../images/assets/get_blueprint-bg.png") no-repeat 100% 0;
}


#blueprintForm.klarifi{
	background: url("../images/assets/get_klarifi-bg.png") no-repeat 100% 0;
}

#blueprintForm .textarea,
#blueprintForm .field{
	width: 60%;
	}

#contactForm .textarea,
#contactForm .field,
#contactForm{
	width: 100%;
	}
	
#contactForm{
	padding: 40px 0 0 0;
	}	


#blueprintForm .textarea textarea,
#blueprintForm .field input,
#contactForm .textarea textarea,
#contactForm .field input{
	width: 90%;
	padding: 10px 5%;
	background: #E6E6E6;
	font-size: 18px;
	border: none;
	}
	
	
#blueprintForm .textarea textarea,
#contactForm .textarea textarea{
	min-height: 80px;
	padding: 15px 5%;	
	}
	

#blueprintForm dl{
	float: left;
	width: 60%;
	margin: 10px 0 30px 0;
	}
	
#contactForm dl{
	float: left;
	width: 100%;
	margin: 10px 0 30px 0;
	}	
	
#blueprintForm dd,
#contactForm dd{		
	float: left;
	width: 50%;
	margin: 10px 0 0 0;
	}
	
#blueprintForm.klarifi dd{
	width: 100%;
	}	
	
#blueprintForm .select{
	float: left;
	width: 60%;
	}
	
#contactForm .select,
#contactForm .select select,
#blueForm .select,
#blueForm .select select{
	width: 100%;
	}	
	
#blueprintForm .right{
	float: right;
	width: 35%;
	position: absolute;
	bottom: 0;
	right: 0;
	text-align: right;
	}	
	
	
#blueprintForm .mailingList,
#contactForm .mailingList{
	font-size: 13px !important;
	}

#contactForm .right{
	float: right;
	text-align: right;
}
	
#blueprintForm .right .submit{
	font-size: 20px;
	}	


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

	#people .profiles .about{display:none !important;}
	
}

	
#people .profile .close{
	float: right;
	cursor: pointer;
	}	


/*-- workshop --*/	

#workshop{
	padding: 0;
	}

#mainContent{
	float: left;
	width: 630px;
	width: 100%;
	color: #666;
	padding: 30px 0;
	}


#mainContent p{
	font-size: 17px;
}


#mainContent h3{
	font-size: 24px;
	padding: 20px 0;
	clear: both;
	}
	
#mainContent h4{
	font-size: 19px;
	padding: 20px 0;
	clear: both;
	color: #000;
	}	
	
#mainContent h6{
	clear: both;
	float: left;
	width: 100%;
	text-align: center;
	padding: 15px 0;
	margin: 25px 0;
	font-size: 17px;
	color: #333;
	border-top: 1px solid #7899b6; 	
	border-bottom: 1px solid #7899b6; 
	}
	
#mainContent strong{
	font-weight: normal;
	color: #000;
	}	
	
#mainContent p em{
	color: #ff883c;
	font-style: normal;
	}

	
#mainContent ul.listCol1{
	float: left;
	width: 45%;
	padding: 0 5% 20px 0;
	}	
	
#mainContent ul.listCol2{
	float: right;
	width: 45%;
	padding: 0 0 20px 5%;	
	}
	
	
#mainContent ol{
	float: left;
	width: 100%;
	padding: 0 0 30px 0;
	}
	
#mainContent ol li{
	float: left;
	width: 45%;
	padding: 0 5% 0 0;
	}			
	

#mainContent ol li img{
	display: block;
	margin: 0 0 10px 0;
	border: 3px solid #7899b6; 
	-webkit-border-radius: 56px;
	-moz-border-radius: 56px;
	border-radius: 56px;
	behavior: url("pie/PIE.htc");			
	}	
	
	
#workshop #mainContent p img{

	}

#form{
	float: right;
	width: 250px;
	padding: 30px 30px 10px 30px;
	background: #799AB7;
	color: #FFF;
	}	


#form h4{
	font-size: 22px;
	padding: 0 0 20px 0;
	}
	
#form .btn{
	margin: 20px 0 0 0;
	-webkit-box-shadow: 2px 2px 0px 0px #ccc;
	-moz-box-shadow:    2px 2px 0px 0px #ccc;
	box-shadow:         2px 2px 0px 0px #ccc;
	}
	
	
	
#form label{
	position: absolute;
	left: -9999px;
	}			

#form .field,
#form .textarea{
	padding: 0;
	}	
	
#form .field input,
#form .textarea textarea{
	border: none;
	background: #FFF;
	width: 94%;
	padding: 10px 3%;
	margin: 0 0 10px 0;
	font-size: 15px;
}


#form .field input{
	height: 26px;
	}

#form .textarea textarea{
	height: 70px;
	}

	
#form .submit{
	margin: 0px 0 0 0;
	}		

/*-- aboutLtf --*/		


#aboutLtf{
	padding: 0 0 50px 0;
	}

#aboutLtf .inner{
	text-align: center;
	position: relative;
	}
	
#aboutLtf .about{
	position: absolute;
	top: 0;
	left: 0;
	}
	

#aboutLtf .about .box{
	float: left;
	width: 700px;
	position: absolute;
	top: 160px;
	left: 45px;
	margin: 0 0 0 0;
	text-align: left;
	color: #FFF;
	z-index: 600;
	}
	
#aboutLtf .about .box h4{
	background: #000;
	background: rgba(0, 0, 0, 0.7);
	padding: 20px;
	position: relative;
	font-size: 20px;
}


#aboutLtf .about .box h4 span.close{
	float: right;
	text-align: center;
	width: 50px;
	height: 50px;
	line-height: 50px;
	cursor: pointer;
	position: absolute;
	top: 10px;
	right:0;
	}


#aboutLtf .about .box h4 span.close:hover{	
	color: #ed1e79;
	}
	
#aboutLtf .about .box span.text{
	padding: 20px 30px 10px 30px;
	display: block;
	background: url("../images/assets/strapline-bg.png");
	}
	
	
#aboutLtf .about .box h4 div.arrow{
	width: 0;
	height: 0;
	border-bottom: 50px solid #000;
	border-bottom: 50px solid rgba(0, 0, 0, 0.7);
	border-right: 50px solid transparent;
	position: absolute;
	top: -50px;
	left: 50px;
}	


#aboutLtf .about img{
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	-khtml-opacity: 0;
	opacity: 0;
	cursor: pointer;
	}

	
#aboutLtf .about .box p{
	padding: 0 0 20px 0;
}	
	
#aboutLtf .about1{
	top: 0;
	left: 60px;
	}
	
#aboutLtf .about2{top: 55px;left: 330px;}
#aboutLtf .about2 .box{top: 160px;left: -240px;}
#aboutLtf .about2 .box h4 div.arrow{left: 340px;}	
	
#aboutLtf .about3{top: 20px;left: 580px;}
#aboutLtf .about3 .box{top: 200px;left: -400px;}
#aboutLtf .about3 .box h4 div.arrow{left: 440px;border-left: 50px solid transparent;border-right: none;}	
	
#aboutLtf .about4{top: 240px;left: 55px;}
#aboutLtf .about4 .box{top: 200px;left: 40px;}
#aboutLtf .about4 .box h4 div.arrow{left: 200px;}	
	
#aboutLtf .about5{top: 310px;left: 430px;}
#aboutLtf .about5 .box{top: 160px;left: -280px;}
#aboutLtf .about5 .box h4 div.arrow{left: 380px;}	
	
#aboutLtf .about6{top: 410px;left: 720px;}
#aboutLtf .about6 .box{top: 160px;left: -520px;}
#aboutLtf .about6 .box h4 div.arrow{left: 560px;border-left: 50px solid transparent;border-right: none;}	

#aboutLtf .about7{top: 610px;left: 90px;}
#aboutLtf .about7 .box{top: 160px;left: 50px;}
#aboutLtf .about7 .box h4 div.arrow{left: 80px;}	
	
#aboutLtf .about8{top: 540px;left: 370px;}
#aboutLtf .about8 .box{top: 200px;left: -220px;}
#aboutLtf .about8 .box h4 div.arrow{left: 380px;}		
	


/*-- home --*/	


#home h1{
	float: left;
	width: 100%;
	font-size: 25px;
	font-weight: bold;
	text-align: center;
	padding: 35px 0;
	}

#home h1 em{
	font-style: normal;
	color: #ed1e79;
	}	

#home ul{
	float: left;
	width: 100%;
	}
	
#home li{
	float: left;
	width: 300px;
	margin: 0 30px 30px 0;
	-webkit-box-shadow: 4px 4px 0px 0px #FFF;
	-moz-box-shadow:    4px 4px 0px 0px #FFF;
	box-shadow:         4px 4px 0px 0px #FFF;	
	}
	
#home li.ltf{
	margin: 0 0 3px 0;
	}


#home li a{
	color: #4D4D4D;
	}
	
#home li a span.about{
	display: block;
	padding: 0 20px;
	text-align: center;
	background: #FFF;
    -webkit-transition: background-color 150ms ease-in-out;
    -moz-transition: background-color 150ms ease-in-out;
    -o-transition: background-color 150ms ease-in-out;
    transition: background-color 150ms ease-in-out;			
	}

#home li a span.about h3{
	display: none;
	min-height: 65px;
	padding: 15px 0 0 0;
	font-size: 18px;
	color: #FFF;
	}
	
#home li a span.about p{
	min-height: 74px;
	padding: 6px 0 0 0;
	color: #4D4D4D;	
	}

#home li a span.about p em{
	font-weight: bold;
	font-style: normal;	
	color: #ed1e79;
	}		

#home li a span.about:hover{
	background: #7899b6 !important;
	}

#home li a span.about:hover h3{
	display: block;
	}
	
#home li a span.about:hover p{
	display: none;	
	}
	
#home li h4{
	display: block;
	text-align: right;
	padding: 5px 0;
	font-size: 18px;
	color: #7899b6;
	}
	

#home li img{
	float: left;
	width: 100%;
	height: auto;
	border-bottom: 1px solid #FFF;
	}	
	
	
#home li .box{
	float: left;
	padding: 0;
	width: 100%;
	color: #FFF;
	background: #7899b6;
	font-size: 14px;
	position: relative;
	-webkit-box-shadow: 10px 10px 0px 0px #E6E6E6;
	-moz-box-shadow:    10px 10px 0px 0px #E6E6E6;
	box-shadow:         10px 10px 0px 0px #E6E6E6;	
	}
	
#home li .box .padding{
	float: left;
	padding: 15px 5% 70px 5%;
	width: 90%;
	min-height: 230px;
	}	
	
#home li .box h2{
	font-size: 28px;
	text-align: center;
	padding: 0 0 20px 0;
	}
	

#home li .box .more{
	float: left;
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: 30px;
	left: 0;
	}




#home li .box span{
	display: inline-block;
	padding: 7px 15px;
	color: #ed1e79;	
	background: #FFF;
	font-size: 16px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border: none;
	-webkit-box-shadow: 3px 3px 0px 0px #ccc;
	-moz-box-shadow:    3px 3px 0px 0px #ccc;
	box-shadow:         3px 3px 0px 0px #ccc;
	cursor: pointer;
	behavior: url("pie/PIE.htc");
    -webkit-transition: background-color 150ms ease-in-out;
    -moz-transition: background-color 150ms ease-in-out;
    -o-transition: background-color 150ms ease-in-out;
    transition: background-color 150ms ease-in-out;	
    -webkit-transition: color 150ms ease-in-out;
    -moz-transition: color 150ms ease-in-out;
    -o-transition: color 150ms ease-in-out;
    transition: color 150ms ease-in-out;	    	
	}		


#home li .box span:hover{
	color: #FFF;	
	background: #ed1e79;
	}
	
#home li .box .videolink{
	float: left;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 200; 
	}
	
#home li .box .videolink p{
	display: inline-block;
	text-align: center;
	position: absolute;
	bottom: 20%;
	left: 50%;
	color: #fff;
	background: #EE1C79;
	padding: 3px 0;
	margin: 0 0 0 -50px;
	width: 100px;
	font-size: 16px;
	}	
	
#sharer .share{
	float: left;
	width: 100%;
	text-align: center;
	padding: 20px 0 40px 0;
	}

#sharer .share span{
	float: none;
	display: inline-block;
	}	
	

#home li.klarifi .box{
	background: #2B2E36;
	}
	
#home li.klarifi a span.about:hover{
	background: #2B2E36 !important;
	}	

#home li.klarifi h4{		
	color: #2B2E36;
	}	
	
#home li.ltf .box{
	background: #ed1e79;
	}

#home li.ltf a span.about:hover{
	background: #ed1e79 !important;
	}

#home li.ltf h4{		
	color: #ed1e79;
	}
	
			
			

/*-- products --*/	
	
#products li{
	float: left;
	width: 300px;
	border: 1px solid #E6E6E6;	
	margin: 0 30px 60px 0;
	-webkit-box-shadow: 4px 4px 0px 0px #FFF;
	-moz-box-shadow:    4px 4px 0px 0px #FFF;
	box-shadow:         4px 4px 0px 0px #FFF;	
	}
	

#products li img{
	float: left;
	}		
	
	
#products li.last{
	margin: 0 0 60px 0;
	}
	
#products li div{
	float: left;
	width: 258px;
	padding: 30px 20px;
	border-top: none;
	}
		

#products li:hover{		
	-webkit-box-shadow: 4px 4px 0px 0px #E6E6E6;
	-moz-box-shadow:    4px 4px 0px 0px #E6E6E6;
	box-shadow:         4px 4px 0px 0px #E6E6E6;	
	border-color: #999999;	
	}
	
#products li:hover div{		

	}
	
	
#products li h3{
	text-align: center;
	font-size: 20px;
	}
	

#products li h5{
	text-align: center;
	font-size: 14px;
	padding: 0 0 20px 0;
	}


#products li h5 a{
	color: #ff883c;
	}	
	

#products li h4{
	font-size: 17px;
	padding: 0 0 10px 0;
	}	
	

#products li p{
	font-size: 14px;
	}		
		
#products li span{
	float: left;
	width: 258px;
	margin: 30px 0 30px 0;
	}		
		
#products li span a{
	float: left;
	width: 128px;
	text-align: center;
	height: 128px;
	position: relative;	
	margin-right: 1px;
	}
	
#products li span a img{
	width: 100%;
	height: auto;
	}


	
#products li span a i.fa-search{
	position: absolute;
	bottom: 0;
	left: 0;
	float: left;
	color: #FFF;
	width: 25px;
	height: 25px;
	line-height: 25px;
	font-size: 13px;
	background: #999999;				
	-webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;						
	}	
	
	
#products li span a:hover i.fa-search{	
	background: #000;
	width: 35px;
	height: 35px;
	line-height: 35px;
	font-size: 16px;					
	}		
	
#products li span a i.fa-play{
	position: absolute;
	bottom: 50%;
	left: 50%;
	float: left;
	color: #FFF;
	width: 44px;
	padding: 0 0 0 6px;
	height: 50px;
	line-height: 50px;
	margin: 0 0 -26px -26px;
	font-size: 20px;
	text-align: center;
	background: #999999;
	background: rgba(0,0,0,0.6);
	border: 2px solid #FFF;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;						
	-webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    behavior: url("pie/PIE.htc");						
	}	
	
#products li span a:hover i.fa-play{	
	background: #000;				
	}
	
	
#products li .more{
	text-align: center;
	font-size: 18px;
	}		
	

/*-- blog --*/	
	
	
#blog{
	float: left;
	width: 100%;
	text-align: center;
	margin: 0;
	}	

#blog .inner{
	position: relative;
	}

#featured{
	float: left;
	width: 590px;
	padding: 30px 30px 20px 30px;
	margin: -75px 0 0 0;
	background: #fff;
	}


#featured.full{
	padding: 30px 30px 50px 30px;
	}

#featured span{
	display: block;
	height: 180px;
	overflow: hidden;
	z-index: 10;
	position: relative;
	}	

#featured span .fade{
	float: left;
	width: 100%;
	z-index: 100;
	height: 56px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: url("../images/assets/fade.png") repeat-x 0 100%;
}

#featured h1{
	font-size: 40px;
	line-height: 1.2em;
	padding: 0px 0 20px 0;
	color: #7899b6;
	}

#featured h2{
	font-size: 30px;
	padding: 10px 0 20px 0;
	}

#featured h3{
	clear: both;
	font-size: 22px;
	padding: 10px 0 20px 0;
	}

#featured h4{
	font-size: 19px;
	padding: 10px 0 20px 0;
	}

#featured h5{
	padding: 0 0 20px 0;
	}

#featured p{
	font-size: 20px;
	line-height: 1.5em;
	padding: 0 0 20px 0;
	}	


#featured ul,
#featured ol{
	padding: 0 0 10px 0;
	}
	
#featured ul li{
	padding: 0 0 10px 20px;
	line-height: 1.4em;
	background: url("../images/assets/bullet-orange.png") no-repeat 0 8px;
	}
	

#featured ol li{
	margin: 0 0 10px 20px;	
	list-style: decimal;
}
			

#featured .meta{
	padding: 0 0 30px 0;
	font-size: 17px;
	}	
	

#featured a{
	color: #ff883c;
	}	
	
	
#featured p img{
	display: block;
	width: 100%;
	height: auto;
	margin: 20px 0 20px 0;
	}


#featured p img.alignRight{
	width: auto;
	float: right;
	margin: 0 0 20px 20px;
	}

#featured a.fancybox{
	display: block;
	position: relative;
	}	

#featured a.fancybox i.fa-search{
	position: absolute;
	bottom: 0;
	left: 0;
	float: left;
	color: #FFF;
	width: 25px;
	height: 25px;
	line-height: 25px;
	font-size: 13px;
	background: #999999;
	text-align: center;				
	-webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;						
	}	
	
	
#featured a.fancybox:hover i.fa-search{	
	background: #000;
	width: 35px;
	height: 35px;
	line-height: 35px;
	font-size: 16px;					
	}		

#featured h6{
	float: left;
	width: 100%;
	margin: 20px 0 30px 0;
	padding: 30px 0 30px 0;
	border-top: 1px solid #799AB7;
	border-bottom: 1px solid #799AB7;
	}

#featured h6 span{
	display: block;
	text-align: center;
	}
	
#featured h6 img{
	display: inline-block;
	margin: 0 0 20px 0;
}	

#featured blockquote {
	display: block;
	padding: 10px 0 30px 0;
	}

#featured blockquote p{
	font-size: 22px !important;
	color: #799AB7;
	padding: 0 0 0 0;
	}
	
#featured blockquote p em{
	font-style: normal;
	font-size: 13px;
	color: #333;
	}


#featured h1 a,
#featured .meta a{
	color: #7899b6;
	}			


#featured.full p strong{
	color: #000;
	font-weight: normal;
	}

#featured.full p{
	font-size: 17px;
}

#featured.full p a{
	color: #799AB7;
	}


.share{
	float: left;
	width: 100%;
	font-size: 12px;
	margin: 20px 0 0 0;
	}

.share i{
	font-size: 16px;
	}

.share span{
	float: left;
	padding: 0 15px;
	height: 35px !important;
	line-height: 38px;
	color: #FFF;
	border-right: 1px solid #FFF;
	cursor: pointer;
	-webkit-transition: background-color 200ms linear;
	-moz-transition: background-color 200ms linear;
	-o-transition: background-color 200ms linear;
	transition: background-color 200ms linear;
	}
	

.share span em{
	font-style: normal;
	}	

	
.share span.st_facebook_custom{background: #4680c0;}	
.share span.st_facebook_custom i{padding: 0 10px 0 0;}

.share span.st_twitter_custom{background: #56cdf3;}	
.share span.st_twitter_custom i{padding: 0 10px 0 0;}

.share span.st_linkedin_custom{background: #007bb6;}
.share span.st_googleplus_custom{background: #dd4b39;}
.share span.st_email_custom{background: #ccc;}
.share span.st_sharethis_custom{background: #ff883c;}


.share span:hover{
	background: #EE1C79;
	}

.share span a{
	color: #fff;
	}


#featured p a.btn{
	color: #fff;
	}
	
	
#featured .address p{
	float: left;
	width: 50%;
	margin-top: 40px;
	font-size: 15px;
	}	


#comments .inner{
	padding: 20px 0;
	}
	
#comments .comment{
	float: left;
	width: 100%;
	padding: 20px 0 20px 0 !important;
	margin: 0 0 20px 0 !important;
	border-bottom: 1px solid #FFF;
	}	
	

#comments h3{
	font-size: 44px;
	}	
	
	
#comments #comment_form	h3{
	font-size: 34px;
	padding: 0 0 20px 0;
	}	


#comments #comment_form{
	float: left;
	width: 48%;
	margin-bottom: 20px;
	}
	
	
#comments #comment_form .field,
#comments #comment_form .textarea{
	float: left;
	width: 100%;
	margin: 0 0 10px 0;
	}	
	
#comments #comment_form .field label,
#comments #comment_form .textarea label{
	float: left;
	width: 24%;
	}	


#comments #comment_form .field input{
	float: right;
	width: 73%;
	padding: 1%;
	border: 1px solid #999;
	}	

#comments #comment_form textarea{
	float: right;
	width: 73%;
	padding: 1%;	
	border: 1px solid #999;
	}


#comments #comment_form .submit{
	padding-left: 24%;
	}	
	
		

#comments .textBox{
	float: right;
	width: 48%;
	padding: 64px 0 20px 0;
	}
	

#comments .textBox h4{
	font-size: 22px;
	padding: 0 0 20px 0;
	color: #FFF;
	}		
		

#blog #form{
	padding-bottom: 40px;
	}


#blog #form form{
	padding: 30px 0 0 0;
	margin: 0;
	}
	
.paddedTop{
	padding-top: 40px !important;
	}

#sideBar{
	float: right;
	width: 310px;
	/*-- padding-bottom: 920px; --*/
	}

	
#sideBar.maps{
	padding-bottom: 0;
	}
	
	
#sideBar.maps iframe{
	float: left;
	width: 100%;
	margin: 0 0 20px 0;
	}	
	
#sideBar.maps h4{
	float: left;
	padding: 20px 10%;
	width: 80%;
	background: #799AB7;
	color: #FFF;
	font-size: 22px;
	line-height: 1em;
	}	

#sideBar.maps h4 span{
	font-size: 17px;
	}	
	
#sideBar .feature{
	float: left;
	width: 100%;
	padding: 35px 0 0 0;
	font-size: 17px;
	}

#sideBar .feature a{	
	color: #799AB7;
	}			

#sideBar .feature a img{
	float: left;
	width: 100%;
	height: auto;
	}
	

#sideBar .feature a h4{
	float: left;
	width: 100%;
	padding: 10px 0;
	font-size: 22px;
	}
	
	
#archives{
	float: right;
	width: 310px;
	padding-bottom: 50px;
	/*-- position: absolute;
	bottom: 50px;
	right: 0; --*/
	}	

/*-- pagination --*/	
	
#pagination .inner{
	padding: 15px 0;
	color: #FFF;	
	}

#pagination a{
	color: #FFF;
	}


/*-- threeCol --*/	

#threeCol{
	padding: 40px 0 30px 0;
	}

#threeCol .col{
	float: left;
	width: 25%;
	padding: 0 12.5% 0 0;
	}
	
#threeCol .last{
	padding: 0 0 0 0;
	}	
	
#archives .col{
	padding: 30px 0 0 0;
	}	

#threeCol .col h4,
#archives .col h4{
	color: #7899b6;
	font-size: 22px;
	padding: 0 0 15px 0;
	}
	
	
#threeCol .col p{
	padding: 0 0 10px 0;
	}	


#threeCol .col li,
#archives .col li{
	padding: 0 0 5px 0;
	}
	

#threeCol .col a,
#archives .col a{
	color: #333;
	-webkit-transition: color 0.2s linear;
    -moz-transition: color 0.2s linear;
    -o-transition: color 0.2s linear;
    transition: color 0.2s linear;	
}	

#threeCol .col em,
#archives .col em{
	font-style: normal;
	color: #666;
	padding: 0 0 0 0;
	}
	
#threeCol .col a:hover,
#archives .col a:hover{
	color: #ed1e79;
}	

/*-- who --*/	
	
	
#who{
	float: left;
	width: 100%;
	height: 683px;
	text-align: center;
	background: #999 url("../images/assets/office-bg.jpg") no-repeat 0 0;
	background-size: cover;	
	margin: 100px 0 0 0 ;
	}	
	

#who .title{
	float: left;
	width: 90%;
	background: #799AB7;
	font-size: 48px;
	padding: 25px 5%;
	margin-top: -100px;
	color: #FFF;
	}	
	
	
#who .more{
	float: left;
	width: 100%;
	position: absolute;
	bottom: 30px;
	font-size: 22px;
	}	
	
	

/*-- quote --*/		
	

#quote{
	padding: 55px 0 90px 0;
	}	
	
#quote .image{
	float: left;
	width: 165px;
	text-align: center;
	color: #799AB7;
	}
	
	
#quote .image img{
	float: left;
	width: 100%;
	margin: 0 0 10px 0;
	border: 2px solid #799AB7;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;		
	behavior: url("pie/PIE.htc");
	}
	

#quote .image p{
	padding: 10px;
	}	


#quote blockquote{
	float: left;
	width: 480px;
	padding: 10px 0 0 40px;
	margin: 0 70px;
	font-size: 17px;
	background: url("../images/assets/quote-left.png") no-repeat 0 0;
	}	
	
	
#quote blockquote span{	
	float: left;
	width: 480px;
	padding: 0 40px 0 0;
	background: url("../images/assets/quote-right.png") no-repeat 100% 80%;
	}
	

#quote blockquote p,
#quote blockquote cite{
	padding: 0 0 30px 0;
	line-height: 1.6em;
	}		
	
	
#quote blockquote cite{
	color: #799AB7;
	}
	
	

/*-- why --*/		
	
#why{
	background: #799AB7;
	color: #FFF;
	}
	

#why .inner{
	text-align: center;
	}
	
	
#why .pixel{
	display: inline-block;
	border: 3px solid #799AB7;
	-webkit-border-radius: 76px;
	-moz-border-radius:76px;
	border-radius: 76px;
	margin: -57px 0 0 0;
	behavior: url("pie/PIE.htc");	
	}


#why h3{
	font-size: 43px;
	padding: 10px 0 20px 0;	
	}
	
	
#why p{
	font-size: 22px;
	line-height: 1.6em;
	width: 75%;
	margin: 0 auto;
	padding: 0 0 30px 0;	
	}	


	
		
/*-- ourWork --*/

#ourWork{
	}
	
#ourWork .inner{
	padding: 70px 0 40px 0;	
	text-align: center;
	background: url("../images/assets/arrow-blue.png") no-repeat 50% 0;
	}

#blocks{
	float: left;
	width: 100%;
	margin: 0 0 40px 0;	
	}
	
#blocks .item {
	width: 25%;
	}
	
#blocks .item.w2 {
	width: 50%;
	}
	
#blocks .item img{
	width:100%;
	height: auto;
	}
	

#ourWork p .btn{
	font-size: 22px;
	margin-top: 30px;
	}	


/*-- portfolio --*/

#portfolio{
	float: left;
	width: 100%;
	margin: 0 0 0 0;
	border-bottom: 1px solid #FFF;	
	}
	
#portfolio .item {
	width: 20%;
	}
	
#portfolio .item.w2 {
	width: 40%;
	}
	
#portfolio .item img{
	width:100%;
	height: auto;
	}


/*-- steps --*/	

#steps{
	text-align: center;
	}

#steps li{
	display: inline-block;
	color: #ccc;
	}

#steps li span{
	display: inline-block;
	padding: 0 30px;	
	}

#steps li.here span{
	color: #fff;
}


.diagnostic{
	padding: 0;
}


.leftCol{
	float: left;
	width: 600px;
	padding: 30px 0 0 0;
	}

.rightCol{
	float: right;
	width: 250px;
	padding: 30px;
	background: #EAEBE6;
	}
	

.rightCol .field input{
	border: none;
	background: #fff;
	border: 1px solid #FFF;
	width: 94%;
	padding: 5px 3%;
	margin: 5px 0 0 0;
	}
	
.rightCol .highlight label,
.highlight span{
	color: #990000;
	}

.rightCol .highlight input{	
	border: 1px solid #990000;
	}


#intro{
	float: left;
	width: 100%;
	height: 631px;
	}


.questions{
	float: left;
	width: 100%;
	height: 631px;
	}
	
.questions li{
	float: left;
	width: 100%;
	border-bottom: 1px solid #CCC;
	}
	
.questions li span{
	float: left;
	padding: 7px 0;
	}				

.questions li select{
	float: right;
	width: 200px;
	margin: 7px 0 0 0;
	}
	

.questions h5{
	float: left;
	width: 100%;
	padding: 30px 0 20px 0;
	}
	
.questions h5 span{
	float: right;
	width: 200px;
	}
	

.questions .button{
	float: right;
	margin: 30px 0 0 0;
	}
	

form.diagnostic{
	display: none;
	}
	
	
#loading{
	float: left;
	width: 100%;
	height: 631px;
	line-height: 631px;
	text-align: center;
	}
	
	
#finalResults{
	float: left;
	width: 100%;
	height: 601px;
	padding: 30px 0 0 0;
	}

#theResult{
	float: right;
	width: 175px;
	text-align: center;
	margin: 0 0 40px 40px;
	}
	
#theResult strong{
	font-size: 90px;
	letter-spacing: -10px;
	}	
		

#order{
	float: right;
	width: 175px;
	margin: 0 0 40px 40px;
	}
	
	
#order img{
	float: left;
}

#order a span{
	float: left;
	width: 145px;
	padding: 15px;
	text-align: center;
	background: #799AB7;
	color: #FFF;	
	}	


#order a:hover span{
	background: #C1B8AF;
}


#finalResults h3{
	font-size: 30px;
	}	
	
#finalResults ul{
	float: left;
	width: 100%;
	padding: 0 0 20px 0;
	}
	

#finalResults li{
	display: none;
	float: left;
	background: none;
	padding: 0 10px 10px 0;
	}


#finalResults li.show{
	display: block;
	}	

#finalResults li a{	
	float: left;
	width: 280px;
	padding: 5px 10px;
	background: #C1B8AF;
	color: #FFF;
	}	
		

#finalResults li a:hover{
	background: #799AB7;
	}			
	

/*-- preFooter --*/

/*-- 
#preFooter{
	background: url("../images/assets/preFooter-bg.png") no-repeat 50% 0;
	}

#preFooter.alt{
	background: url("../images/assets/preFooter-bg-alt.png") no-repeat 50% 0;
	}
	--*/
	
#preFooter .bg,
#preFooter .bg2,
.fadeBack{
	float: left;
	width: 100%;
	background: url("../images/assets/shadow-top.png") repeat-x 0 0;	
	}	

#preFooter .bg2{
	background: url("../images/assets/shadow-btm.png") repeat-x 0 100% ;	
	}

#enquiry{
	float: right;
	width: 47%;
	padding: 20px 0 40px 3%;		
	}	

#guide,
.alt #enquiry{
	float: left;
	width: 47%;
	padding: 20px 3% 40px 0;	
	}

	
#preFooter h4{
	font-size: 44px;
	color: #FFF;
	padding: 0 0 20px 0;
	}

#enquiry h4{
	color: #799AB7;
	}
	

#guide h6{
	position: relative;
	text-align: center;
	}
	

#guide h6 span{
	position: absolute;
	top: 80px;
	left: 0;
	display: inline-block;
	width: 260px;
	padding: 0 85px;
	color: #fff;
	font-size: 20px;
	}
	
	
#block{
	float: right;
	width: 50%;
	text-align: left;
	padding: 20px 0 0 0;
	color: #FFF;	
	}	
	

	
#block #report{
	float: left;
	width: 450px;
	padding: 0 0 30px 30px;
	}
	

#block #report p{
	padding: 0;
	margin: 0;
	}	
	

#block #report .btn{
	float: right;
	margin: 0 0 0 0;
	}	
	
	
#block #latest{
	float: left;
	width: 100%;
	border-top: 1px solid #FFF;
	background: #2B2E36;
	}
	
	
#block #latest #padding{
	float: left;	
	width: 450px;
	padding: 40px 0 60px 30px;	
	}
	

#block #latest h5{
	font-size: 22px;
	padding: 0 0 10px 0;
	}		

#block #latest a{
    -webkit-transition: color 150ms ease-in-out;
    -moz-transition: color 150ms ease-in-out;
    -o-transition: color 150ms ease-in-out;
    transition: color 150ms ease-in-out;
    color: #FFF;
    }	

#block #latest h5 a{
	color: #FFF;
	}	

#block #latest p a{
	color: #c1b7af;
	}
	
	
#block #latest a:hover{
	color: #ed1e79;	
	}	
	
	
	
#preFooter .btn{
	font-size: 22px;
	}	

#guide .btn,
#block .btn{	
	float: right;
	margin: 20px 0 0 0;
	-webkit-box-shadow: 2px 2px 0px 0px #ccc;
	-moz-box-shadow:    2px 2px 0px 0px #ccc;
	box-shadow:         2px 2px 0px 0px #ccc;
	}
	

#enquiry .inside{
	float: right;
	width: 450px;
	}
	
	
#enquiry label{
	position: absolute;
	left: -9999px;
	}			
	
	
#enquiry .field input,
#enquiry .textarea textarea{
	border: none;
	background: #E6E6E6;
	width: 94%;
	padding: 10px 3%;
	margin: 0 0 10px 0;
	font-size: 20px;
}


#enquiry .field input{
	height: 26px;
	}

#enquiry .textarea textarea{
	height: 70px;
	}

#enquiry .checkbox{
	float: left;
	margin: 20px 0 0 0;
	}	
	
#enquiry .submit{
	float: right;
	margin: 10px 0 0 0;
	}	
	
	
.unhappyMessage{display: block;color: #990000;font-size: 13px;padding: 0 0 10px 0;}	
	

/*-- footer --*/

#footer{
	padding: 20px 0 60px 0;
	}
	
	
#footer .schema div{display:inline-block;}	


	
#footer .links{
	float: left;
	width: 100%;
	margin: 0 0 20px 0;
	font-size: 14px;
	}
	
#footer .links a{color: #4d4d4d;}	
	
#footer .links .email{float: left;width: 20%;}	
#footer .links .legal{float: left;text-align: center;width: 60%;}	
#footer .links .call{float: right;text-align: right;width: 20%;}		
	
#footer .links .email a:hover{color: #ed1e79;}
	
#footer p{
	text-align: center;
	color: #444;
	font-size: 14px;
	padding: 0 0 20px 0;
	}
	
	
#footer .share{
	float: left;
	width: 100%;
	text-align: center;
	padding: 0 0 20px 0;
	}
	

#footer .share span{
	float: none;
	display: inline-block;
	}
	

#footer .social{
	float: right;
	width: 100%;
	text-align: center;
	}	


#footer .social a{	
	color: #ed1e79;
	font-size: 25px;
	margin: 0 0 0 5px;	
    -webkit-transition: color 150ms ease-in-out;
    -moz-transition: color 150ms ease-in-out;
    -o-transition: color 150ms ease-in-out;
    transition: color 150ms ease-in-out;		
	}	
	

#footer .social a:hover{		
	color: #7A98B6;
	}
	
#footer .nav{
	clear: both;
	display: block;
	text-align: center;
	padding: 20px 0 0 0;
	}	
	
#footer .nav li{
	display: inline-block;
	border-right: 1px solid #4d4d4d;
	}
	
#footer .nav li:last-child{
	border-right: none;
	}	
	
#footer .nav li a{
	display: block;
	line-height: 1em;	
	font-size: 14px;
	padding: 0 10px 0 5px;
	color: #4d4d4d;
	}
	
#footer .nav li a:hover{		
	color: #ed1e79;
	}	
	
/*-- added for klarifi --*/	
	
#feature-boxes{
	float: left;
	width: 100%;
	text-align: center;
	}
	
	
#feature-boxes .features-box{
	float: left;
	width: 19.5%;
	padding: 150px 2% 2% 2%;
	margin: 0 2% 0 0;
	min-height: 390px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #EEE;
	-webkit-box-shadow: 0px 6px 0px 0px #ccc;
	-moz-box-shadow: 0px 6px 0px 0px #ccc;
	box-shadow: 0px 6px 0px 0px #ccc;
	position: relative;
	}
	
	
#feature-boxes .features-box .image{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 150px;
	display: table;
	}
	
#feature-boxes .features-box .image .in{
	display: table-cell;
	vertical-align: middle;
	}		
	
#feature-boxes .last{
	margin: 0;
	}	
	
#feature-boxes .features-box h3{
	font-size: 21px;
	}
	
#feature-boxes .features-box p{
	font-size: 14px;
	}	
	
	
.text .content h6{
	font-size: 24px;
	padding: 0 0 40px 0;
	margin: -20px 0 0 0;
	}
	
	
.text .content h4{
	font-size: 24px;
	padding: 20px 0 20px 0;
	}	
	
#benefits-boxes{
	float: left;
	width: 100%;
	text-align: center;
	}
	
	
#benefits-boxes .features-box{
	float: left;
	width: 23.5%;
	padding: 190px 0 0 0;
	margin: 0 2% 0 0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #EEE;
	position: relative;
	}
	

#benefits-boxes .photo_bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 190px;
	display: table;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	}	
	
#benefits-boxes .photo_bg .circle-wrap{	
	display: table-cell;
	vertical-align: middle;
	}
	
	
#benefits-boxes .photo_bg .circle-wrap img{
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	border: 4px solid #ccc;
	width: 70%;
	}			
	
#benefits-boxes .features-box h4{
	font-size: 21px;
	padding: 5% 2% 5px 2%;
	}
	
#benefits-boxes .features-box p{
	font-size: 14px;
	padding: 0 2%;
	min-height: 130px;
	}	
	
	
#benefits-boxes .social-block{
	float: left;
	width: 100%;
	background: #4d4d4d;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;	
	-webkit-box-shadow: 0px 6px 0px 0px #333;
	-moz-box-shadow: 0px 6px 0px 0px #333;
	box-shadow: 0px 6px 0px 0px #333;	
	}				
	
#benefits-boxes .social-block a{
	display: block;
	color: #FFF;
	padding: 10px 0;	
	font-size: 22px;
	}	

#benefits-boxes .last{
	margin: 0;
	}
	
	
#pricelists{
	float: left;
	width: 100%;
	text-align: center;
	padding: 40px 0 0 0;
	}
	
	
#pricelists .prices{
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	}	
	
	
#pricelists .prices li{
	float: left;
	width: 24%;	
	margin: 0 0 40px 0;
	padding: 0;
	list-style: none;
	background: #ddd;
	}	

#pricelists .prices li.double{
	width: 44%;	
	margin: 0 2% 40px 2%;
	}

#pricelists .prices li.full{
	width: 100%;	
	margin: 0 0 40px 0;
	}

#pricelists .prices li h3{
	display: block;
	background: #777;
	padding: 10px;
	color: #fff;
	font-size: 24px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;	
	}
	
#pricelists .prices li.double h3{	
	background: #4d4d4d;
	}	
	
#pricelists .prices li h2{
	display: block;
	background: #87A3BD	;
	padding: 10px;
	color: #fff;
	font-size: 30px;
	}
	
#pricelists .prices li h2 span{
	font-size: 15px;
	}	
	
#pricelists .prices li p{
	display: block;
	padding: 15px 10px;
	color: #000;
	font-size: 15px;
	}
	
	
	
#pricelists .prices li p:nth-child(odd){
	background: #F3F3F3;
	}	

#pricelists .prices li h6{
	display: block;
	padding: 10px;
	color: #000;
	background: #4d4d4d;
	font-size: 18px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;		
	}
	

#pricelists .padded{
	font-size: 14px;
	padding: 0 0 40px 0;
	}
	
	
.text .content div ol,
.text .content div ol li{
	float: left;
	width: 100%;
	background: none;
	}
	
.text .content div ol li{
	margin: 0 0 30px 0;
	}	
	
.text .content div ol img{
	float: right;
	margin: 0 0 0 30px;
	}	
	
img#main{
	float: left;
	width: 100%;
	height: auto;
	margin: -50px 0 0 0;
	padding: 0 0 40px 0;
	}
	
.text .content img.half{
	float: left;
	width: 50%;
	}


.text .content table{
	float: left;
	width: 100%;
	margin: 0 0 30px 0;
	border: none;
	border-top: 1px solid #CCC;
	border-left: 1px solid #CCC;
	}	
	
.text .content table td{
	padding: 15px;
	border: none;
	border-bottom: 1px solid #CCC;
	border-right: 1px solid #CCC;
	vertical-align: top;
	}		
	
#contentslides{
	float: left;
	width: 100%;
	margin: 0 0 40px 0;
}				

#contentslides li{
	float: left;
	width: 100%;
	background: none;
	margin: 0;
	padding: 0;
	text-align: center;
	position: relative;
	}
	
#contentslides li img{
	width: 100% !important;
	height: auto !important;
	max-width: 425px !important;
	}	
	
#contentslides .flex-direction-nav .flex-prev{
	position: absolute;
	top: 70px !important;
	left: 0px;
	float: left;
	width: 61px;
	height: 124px;
	text-indent: -9999px;
	z-index: 200;
	background: url("../images/assets/more-arrows.png") no-repeat 0 0;
	}

#contentslides .flex-direction-nav .flex-next{
	position: absolute;
	top: 70px;
	right: 0;
	float: left;
	width: 61px;
	height: 124px;
	text-indent: -9999px;	
	z-index: 200;	
	background: url("../images/assets/more-arrows.png") no-repeat -61px 0;	
	}
	
	
#contentslides .flex-control-nav{
	display: none;
	position: absolute;
	bottom: -30px;
	right: 20px;
	z-index: 300;
	}

#contentslides .flex-control-nav li{
	float: left;
	margin: 0 0 0 10px;	
	}
	
#contentslides .flex-control-nav li a{
	float: left;
	text-indent: -9999px;
	width: 9px;
	height: 9px;
	background: #BCCDDD;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	cursor: pointer;
	}
	
#contentslides .flex-control-nav li a.flex-active{	
	background: #FFF;
	}
	
/*-- profile mouseover effect --*/	

.imageBlock{
	position: relative;
	display: inline-block;
	}
	
.imageBlock .caption{
	position: absolute !important;
	bottom: 100px;
	left: -50px;
	display: block;
	width: 200px;
	height: auto !important;
	padding: 10px !important;
	background: #333;
	color: #FFF;
	font-size: 14px;
	z-index: 1000;
	line-height: 1.5em;
	}
	
.imageBlock:hover .caption{
	display: block !important;
	}	
	
.imageBlock .caption strong{
	display:block;
	color: #fff !important;
	font-size: 16px;
	}		


.imageBlock.floatRight{
	float: right;
	}
	
.imageBlock.floatLeft{
	float: left;
	}		

/* ==========================================================================
   Media Queries
   ========================================================================== */

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

	.row .inner{width: 740px;}
	
	.strapline h1,.strapline h3{padding: 30px 0 0 0;}
	.strapline h4{font-size: 30px;}
	#results{width: 74%;padding: 20px 13%;}
	#slider .slides li .about{width: 70%;padding: 60px 15% 40px 15%;}
	#quote blockquote{width: 380px;}
	#quote blockquote span{width: 340px;}
	
	#pageHeader blockquote{width: 540px;font-size: 18px;}

	#aboutLtf .background{width: 100%;}
	#aboutLtf .about1{top: 0;left: 0px;}
	#aboutLtf .about2{top: 45px;left: 230px;}
	#aboutLtf .about2 .box{top: 160px;left: -180px;}
	#aboutLtf .about2 .box h4 div.arrow{left: 300px;}	
	#aboutLtf .about3{top: 0px;left: 440px;}	
	#aboutLtf .about4{top: 180px;left: 0px;}
	#aboutLtf .about5{top: 260px;left: 320px;}
	#aboutLtf .about6{top: 350px;left: 560px;}
	#aboutLtf .about6 .box{top: 160px;left: -480px;}
	#aboutLtf .about6 .box h4 div.arrow{left: 500px;border-left: 50px solid transparent;border-right: none;}	
	#aboutLtf .about7{top: 510px;left: 20px;}
	#aboutLtf .about8{top: 460px;left: 270px;}
	#aboutLtf .about .box{width: 600px;}

	#intro img{margin: 0;width:100%;height: auto;}

	#examples .flex-direction-nav .flex-prev{top: 180px;}
	#examples .flex-direction-nav .flex-next{top: 180px;}

	#serviceList li{width: 225px;margin: 0 10px 40px 10px;}

	#products li{width: 240px;margin: 0 10px 60px 0;}
	#products li img{width: 100%;height: auto;}
	#products li div{width: 218px;padding: 30px 10px;}	
	#products li h3{font-size: 16px;}
	#products li h5{font-size: 12px;}
	#products li h4{font-size: 15px;}
	#products li span{width: 218px;}
	#products li span a{width: 108px;height: 108px;}		
	
	#block #report .btn{margin: 15px 0 0 0;}

	#featured .address p{width: 45%;padding: 0 5% 0 0;}

	.filters dl{padding: 0 0 10px 0;}			
	.filters dd{width: 45%;}

	#people .profiles li li{width: 205px;padding: 0 20px;}

	#clientList li.c3{margin-right: 0;}
	#clientList li.last{margin-right: 26px;}

	#featured{width: 460px;}
	.share em{display: none;}
	.share span.st_facebook_custom{margin: 0 0 10px 0;}
	.share span.st_facebook_custom i{padding: 0 0px 0 0;}
	.share span.st_twitter_custom i{padding: 0 0px 0 0;}
	
	#sideBar{width: 220px;}
	#archives{float: right;width: 220px;}
	#form{width: 180px;padding: 30px 20px 10px 20px;}
	
	#preFooter h4{font-size: 32px;}
	#preFooter #guide h6 img{width: 100%;height: auto;}
	#preFooter #guide h6 span{width: 220px;font-size: 16px;top: 70px;padding: 0 65px;}
	#footer .share{margin: 0 0 20px 100px;}		
	
	.leftCol{width: 410px;padding: 30px 0 0 0;}
	#intro{height: auto;}
	
	.questions{width: 100%;height: auto;}	
	.questions li span{width: 500px;padding: 7px 0;}				
	.questions li select{width: 200px;margin: 7px 0 0 0;}
	.questions h5 span{width: 200px;}
	#loading{height: 631px;line-height: 631px;}
	#finalResults{height: auto;padding: 30px 0 30px 0;}

	#comments #comment_form{width: 100%;}
	#comments .textBox{width: 100%;padding: 40px 0 40px 0;}

	#footer .links{font-size: 12px;}

	#block #report{width: 340px;}	
	#block #latest #padding{width: 340px;}
	#enquiry .inside{width: 340px;}	

	#blueprint .inner{width: 740px;}
	#blueprint .inner .content{width: 400px;}	




/*-- added for klarifi --*/	
	
#feature-boxes .features-box{
	width: 21.5%;
	padding: 150px 1% 2% 1%;
	min-height: 450px;
	}
	
	
#feature-boxes .features-box h3{
	font-size: 18px;
	}
	
#feature-boxes .features-box p{
	font-size: 14px;
	}			


#benefits-boxes .features-box h4{
	font-size: 18px;
	}

	
#benefits-boxes .features-box p{
	min-height: 180px;
	}
	
.imageBlock .caption{
	left: -20px;
	width: 130px;
	}	
	
}






@media only screen 
and (max-width : 960px)
and (min-width : 740px) {	
	
	#home li{
		float: left;
		width: 240px;
		margin: 0 10px 10px 0;
	}
	
	#home li .box{
		-webkit-box-shadow: 5px 5px 0px 0px #E6E6E6;
		-moz-box-shadow:    5px 5px 0px 0px #E6E6E6;
		box-shadow:         5px 5px 0px 0px #E6E6E6;	
	}

	#home li a span.about{
		padding: 0 10px;	
	}

	#home li a span.about h3{
		min-height: 95px;
		padding: 15px 0 0 0;
	}
	
	#home li a span.about p{
		min-height: 104px;
		padding: 6px 0 0 0;
	}

	#home li .box .padding{
		float: left;
		padding: 15px 5% 70px 5%;
		width: 90%;
		min-height: 260px;
	}
	
}		

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

	#navigation{display:block !important;}

}


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

/*-- fix top menu --*/




	body{padding: 0 0 0 0;}
	#header{position: relative;top: auto;height: auto;}
	#nav{top: auto;position: relative;height: auto;margin-bottom: -30px;}



	.row .inner{width: 300px;padding-top: 30px;}
	
	#logo{width: 100%;text-align: center;}
	#logo img{width: 100%;height: auto;display: inline-block;}
	
	.klarifiPage #logo img{width: 70%;}
	
	#services{display: none;}
	
	#header .inner{position: relative;}
	#menu{display: block;float: left;margin: -30px 0 0 0;}
	#call{position: absolute;top:2px;right: 10px;}
	#call a{font-size: 18px;}
	
	.homepage #call{width: 100%;position: relative;top:auto;right: auto;text-align: center;}
	
	#phone{margin: 0;position: absolute;top: 80px;right: 0;z-index: 300;}
	
	#dropdown{margin: 15px 0 20px 0;}
	
	#nav .inner{width: 320px;}
	
	#nav .inner{width: 100%;}
	.navBg{float: left;width: 100%;background: #000;background: rgba(0,0,0,0.8);position: absolute;top: 55px;left: 0;z-index: 1000;}
	#navigation,#menu span.middle{display: block;width: 320px;margin: 0 auto;}
	#menu span.button{display: inline-block;background:#ed1e79;height: 55px;line-height: 55px;padding: 0 10px;color:#FFF;cursor: pointer;}
	
	#navigation{display: none;padding: 10px 0;width: 300px;font-size: 18px;}
	#navigation > li > a{display: block;padding: 7px 0;margin: 2px 0;color: #FFF;}
	#navigation > li > ul > li > a{display: block;padding: 7px 0 7px 15px;margin: 2px 0;color: #FFF;background: url("../images/assets/nav-line.png") no-repeat 0 17px;}
	
	#navigation > li > ul > li > ul > li > a{display: block;padding: 7px 0 7px 30px;margin: 2px 0;color: #FFF;background: url("../images/assets/nav-line.png") no-repeat 15px 17px;}

	#slider .slides li{padding: 240px 0 0 0;}
	
	#showcase .strapline{top: 120px;height: 70px;}
	.strapline img{display: none;}
	.strapline h1,.strapline h3{padding: 13px 0 0 0;font-size: 24px;}
	.strapline h4{font-size: 16px;}

	#pageHeader blockquote{width: 240px;font-size: 16px;padding: 20px;margin:130px auto 70px auto;}
	#pageHeader .strapline{height: auto;padding: 10px 0;}
	#pageHeader .strapline h1, #pageHeader .strapline h3{padding: 0 0 0 0;font-size: 24px;}
	#pageHeader .blogImage{height: 240px;}	
	#pageHeader .titleOnly{height: 44px;}

	#aboutLtf .about img{
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;
	cursor: pointer;
	max-width: 290px;
	}
	
	#aboutLtf{padding-top: 30px;}
	#aboutLtf .background{display: none;}
	#aboutLtf .about{position:relative;top:auto;left:auto;margin: 20px 0;}
	#aboutLtf .about .box{width:300px;top:auto;left:auto;}
	#aboutLtf .about .box h4 div.arrow{left: 140px;}

	#sideBar{width: 300px;padding-bottom: 20px;}
	#sideBar.maps iframe{margin-bottom: 30px;}
	#featured{width: 300px;padding: 30px 0px 20px 0px;margin: 0 0 0 0;}	
	#featured.full{padding: 30px 0px 50px 0px;}
	#featured h1{font-size: 30px;}
	
	#intro h1{font-size: 30px !important;}
	#intro .inner h6{position: absolute;bottom: 0px;left: 0;}
	#intro img{margin: 30px 0;width:100%;height: auto;}
	.text .download{position: relative;top: auto;right: auto;}	
	.text blockquote{width: 100%;}
	
	#client .btn{font-size: 18px;}
	
	#award img{display:block;margin: 0 auto 20px auto;}
	
	#examples .flex-direction-nav .flex-prev{top: 40px;}
	#examples .flex-direction-nav .flex-next{top: 40px;}
	
	#form{width: 260px;}
	
	#archives{width: 300px;position: relative;bottom: auto;right: auto;}	

	#people .profiles li li{width: 240px;padding: 0 30px;}
	#people .profiles .profile{display:none !important;}
	
	#slider .slides li .about{width: 90%;padding: 60px 5% 40px 5%;}
	#slider .slides li .about p{font-size: 15px;}
	
	#slider .flex-direction-nav .flex-next,
	#thumbnailSlider .flex-direction-nav .flex-next{right: 20px;}
	#slider .flex-control-nav{position: absolute;top: auto;bottom: -185px;margin: 0 -72px 0 0;right:50%;z-index: 2000;}

	#carousel{padding-bottom: 30px;}
	#carousel .slides li .btn{width: 140px;font-size: 18px;}
	#carousel .slides li.flex-active-slide .btn{left: 32px;}
	
	#who{height: 250px;margin: 0;}
	#who .title{font-size: 18px;margin-top: 0;}
	#who .more{bottom: -20px;font-size: 18px;z-index: 1000;}
	
	#quote .image{display: none;}
	#quote blockquote{width: 260px;margin: 0 0;font-size: 15px;}	
	#quote blockquote span{	width: 220px;}
	
	#why h3{font-size: 22px;}
	#why p{font-size: 16px;width: 90%;}	

	#archives{padding: 0 0 40px 0;}

	#featured h3{font-size: 18px;}
	#featured .address p{width: 100%;padding: 0 0 0 0;}

	#serviceList li{width: 300px;margin: 0 0px 40px 0px;}

	#clientList li,#clientList li a{width: 300px;}

	#blocks .item, #blocks .item.w2{width:50%;}

	#people .inner h1{font-size: 30px;}

	#examples{margin-top: 30px;}
	#examples .details span h4{font-size: 11px;}
	#examples .summary h3{font-size: 20px;padding: 0 0 10px 0;}
	#examples .summary p{font-size: 15px;}
	#examples .details span{width: 100%;margin: 0 0 0 0;}
	#examples .buttons{float: left;width:100%;text-align: center;}
	#examples .buttons a{float: none;display: inline-block;margin: 20px 0 0 0;}

	#examples .quote blockquote{width: 260px;}	
	#examples .quote blockquote span{width: 220px;}
	#examples .quote blockquote cite{display: block;margin-left: -40px !important;}
	
	.versions dt{width:100%;text-align: center;padding: 0 0 10px 0;}
	
	#enquiry{width: 100%;}	
	#guide, .alt #enquiry{width: 100%; padding: 20px 0 40px 0;}
	#guide h4, #enquiry h4{font-size: 22px;text-align: center;}

	#products li{width: 300px;margin: 0 0px 60px 0;}
	#products li img{width: 100%;height: auto;}
	#products li div{width: 260px;padding: 30px 20px;}	
	#products li h3{font-size: 16px;}
	#products li h5{font-size: 12px;}
	#products li h4{font-size: 15px;}
	#products li span{width: 258px;}
	#products li span a{width: 128px;height: 128px;}	

	#threeCol .col{width: 100%;padding: 15px 0;}
	
	#workshop #form{margin-bottom: 40px;}
	#mainContent{width: 300px;}
	#mainContent img{width:100%;height:auto;}
	#mainContent ul.listCol1{width: 100%;padding: 0 0 20px 0;}	
	#mainContent ul.listCol2{width: 100%;padding: 0 0 20px 0;}
	#mainContent ol li{width: 100%;padding: 0 0 20px 0;}			
	#mainContent ol li img{width: 100px;}	
	
	#portfolio .item {width: 50%;}
	#portfolio .item.w2 {width: 50%;}		
	.filters dt, .filters dd{width: 100%;height: auto;}
	
	#pagination a{font-size: 15px;padding:0 0 15px 0;}
	#pagination a.previous{float: left;}
	#pagination a.next{float: right;}
	
	#preFooter{background: #799AB7;}
	#preFooter .inner{width: 100%;}
	#preFooter #guide h6 span{top: 60px;width: 200px;padding: 0 50px;margin: 0;font-size: 14px;}	
	#preFooter .btn{font-size: 18px;}	
	
	#block{background: #799AB7 url("../images/assets/shadow-top.png") repeat-x 0 0 ;float: left;width: 100%;padding: 10px 0 200px 0;position: relative;}	
	#block #report{width: 300px;padding: 0 0 30px 0;}
	#block #latest{position: absolute;width: 100% !important;padding: 20px 0 0 0;bottom: 0;left: 0;}

	#block #latest #padding{float: none;margin: 0 auto;width: 300px;padding: 0 0 40px 0;}

	#guide{float: none;margin: 0 auto;width: 300px;padding: 50px 0 50px 0;}
	#guide p{text-align: center;}	
	#guide .btn,#block .btn{float: none;margin: 20px 0 0 0;}
	
	#enquiry{width: 100%; background: #FFF url("../images/assets/shadow-btm.png") repeat-x 0 100% ;	}
	#enquiry .inside, #block .inside{clear: both;float: none;margin: 0 auto;width: 300px;padding: 20px 0 20px 0;}
	#enquiry .field input,#enquiry .textarea textarea{font-size: 16px;}
	#enquiry .checkbox{margin: 0px 0 0 0;}	
	#enquiry .submit{float: none;clear: both;text-align: center;padding: 20px 0 0 0;}	

	#footer .share{float: left;width: 100%;margin: 0 0 0 0;}
	#footer .share span.st_facebook_custom{margin: 0 0 10px 15px;}	
	#footer .social{width: 100%;text-align: center;}	

	#steps li{font-size: 14px;}
	#steps li span{padding: 0 0px;}
	
	#featured img{
	width:auto !important;
	max-width: 300px !important;
	height: auto !important;
	}	

	.leftCol{width: 300px;padding: 30px 0 0 0;}
	.rightCol{margin: 0 0 40px 0;}
	#intro{height: auto;}
	.questions{width: 100%;height: auto;}	
	.questions li{margin: 0 0 10px 0;}
	.questions li span{width: 300px;padding: 7px 0;}				
	.questions li select{width: 300px;margin: 7px 0 25px 0;}
	.questions h5 span{display: none;}
	#loading{height: 400px;line-height: 400px;}
	#finalResults{height: auto;padding: 30px 0 30px 0;}

	#theResult{float: right;width: 100%;text-align: center;margin: 0 0 40px 0;}
	#order{float: right;width: 300px;margin: 0 0 40px 0px;width: 100%;text-align: center;}
	#order img{float: none;}
	#order a span{width: 270px;}

	#comments #comment_form .field label,
	#comments #comment_form .textarea label{width: 100%;}	
	#comments #comment_form .field input,
	#comments #comment_form .textarea textarea{width: 98%;}
	#comments #comment_form .submit{padding-left: 0;}		

	#footer .links{font-size: 14px;}
	#footer .links .email{float: left;text-align: center;width: 100%;margin: 10px 0 0 0;}	
	#footer .links .legal{float: left;text-align: center;width: 100%;margin: 10px 0 0 0;}	
	#footer .links .call{float: right;text-align: center;width: 100%;margin: 10px 0 0 0;}		

	#blueprint .inner{width: 300px;}
	#blueprint .inner .content{width: 300px;}	

	#blueprintForm{background: none;}
	#blueprintForm .textarea,#blueprintForm .field{width: 100%;}
	#blueprintForm .textarea textarea, #contactForm .textarea textarea{min-height: 140px;}
	#blueprintForm dl{width: 100%;}
	#blueprintForm dd{width: 100%;}
	#blueprintForm .select{width: 100%;}
	#blueprintForm .right,#contactForm .right{width: 100%;position: relative;text-align: center;}	

.text .content .full{
	width:100%;
	}

/*-- added for klarifi --*/	
	
#feature-boxes .features-box{
	width: 90%;
	padding: 150px 5% 5% 5%;
	margin: 0 0 40px 0;
	min-height: 0;
	}

#benefits-boxes .features-box{
	float: left;
	width: 100%;
	padding: 190px 0 0 0;
	margin: 0 0 40px 0;
	}
	
#benefits-boxes .features-box p{
	min-height: 0px;
	padding: 0 0 15px 0;
	}
	
#benefits-boxes .photo_bg .circle-wrap img{
	width: 50%;
	}
	
	
#pricelists .prices li{
	width: 100% !important;	
	margin: 0 0 40px 0;
	}			



.text .content div ol img{
	width: 100%;
	margin: 15px 0 15px 0 ;
	}

.text .content img.half{
	float: left;
	width: 100%;
	}	
	
#contentslides .flex-direction-nav .flex-prev{
	top: 40px !important;
	}

#contentslides .flex-direction-nav .flex-next{
	top: 40px;
	}
	

#blueprintForm.klarifi{
	background: none;
}			


.imageBlock .caption{
	left: 0px;
	width: 100px;
	}
	
}			


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}



/*
 * Popup styles
 */
 
.popup{
	padding: 0;
	background: #7b98b5;
 	}
 	
 #popup{
 	float: left;	
 	width: 90%;
 	padding: 5%;
 	background: #7b98b5;	
 	}
 	
 	
  #popup h1{
  	float: left;
  	font-size: 60px;
  	font-weight: bold;
  	color: #FFF;
  	text-transform: lowercase;
  	}

#popup .hannah{
	float: right;
	max-width: 126px;
	width: 30%;
	}
  	
  	
#popup .dee{
	float: right;
	width: 40%;
	max-width: 300px;
	margin-top: 10px;
	border: 2px solid #FFF;
	} 
	
#popup p{
	float: left;
	width: 100%;
	padding: 20px 0;
	font-size: 28px;
	color: #FFF;
	}
	
	
#popup form p.field{
	float: left;
	width: 60%;
	padding: 0 0 10px 0;
	}
	
#popup form p.field input{
	border: none;
	width: 90%;
	padding: 2% 5%;
	}			


#popup form p.submit{
	float: right;
	width: 40%;
	margin: -15px 0 0 0;
	text-align: right;
	}
	
	
#popup p.small{
	font-size: 14px;
	width: 100%;
	}	


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

  #popup h1{
  	font-size: 50px;
	}

}


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


#popup .hannah{
	padding-top: 30px;
	}

#popup h1{
	width: 100%;
	font-size: 30px;
	text-align: center;
	}

#popup .dee{
	display: none;
	}

#popup p{
	float: left;
	width: 70%;
	padding: 20px 0;
	font-size: 24px;
	}

#popup form p.field input{
	font-size: 20px;
	}

#popup form p.submit{
	width: 100%;
	margin: 0 0 0 0;
	text-align: center;
	}

#popup form p.field{
	float: left;
	width: 100%;
	}
	
#popup p.small{
	text-align: center;
	}		

}