﻿/*!
 * ACT Group DMCC CSS
 *
 * Copyright 2013
 * ACTGROUP
 *
 */ 

/************************/
/****** HTML RESET ******/
/************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {	display: block;}
body {line-height: 1;}
ul {	list-style: none;}
img{max-width: 100%;height: auto;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {	content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}

.clear{clear: both;}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/*******************************/
/********** TYPOGRAPHY *********/
/*******************************/
@font-face {
    font-family: 'MuseoSlab500Regular';
    src: url('web fonts/Museo_Slab_500-webfont.eot');
    src: url('web fonts/Museo_Slab_500-webfont.eot?#iefix') format('embedded-opentype'),
         url('web fonts/Museo_Slab_500-webfont.woff') format('woff'),
         url('web fonts/Museo_Slab_500-webfont.ttf') format('truetype'),
         url('web fonts/Museo_Slab_500-webfont.svg#MuseoSlab500Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

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

a.link{color: #3c4658; border-bottom: 1px dotted #3c4658; }
a.link:hover{text-decoration: none; border-bottom: 1px dotted #E60008; color: #E60008;}

span.ampersand{font-family: 'Lato', serif;}

em{color: #e60008; font-family: 'MuseoSlab500Regular', serif;}

p{margin-bottom: 15px;}
p.dropcap:first-letter { font-size: 30pt; color: #3c4658; padding: 8px 5px 0 0; float: left; font-family: 'MuseoSlab500Regular', serif; }

h1{font-family: 'MuseoSlab500Regular', serif; color: #313948; font-size: 18px; padding-bottom: 25px;}
h2{font-family: 'MuseoSlab500Regular', serif; 	font-size: 16px; color: #313948; padding-bottom: 9px;}
h3{font-family: 'MuseoSlab500Regular', serif; color: #313948 ; font-weight: normal; font-size: 16px; padding-bottom: 10px;}
h4{font-family: 'MuseoSlab500Regular', serif; color: #313948; font-weight: normal; font-size: 14px; padding-bottom: 15px;}

.blockquote-header{font-family: 'MuseoSlab500Regular', serif; margin-top: 40px; display: block; font-size: 14px;color: #191919;  }
.blockquote li{padding-left: 25px; background: url("../images/bulletcirclelines.png") no-repeat left center; margin-bottom: 4px;}
.blockquote li:hover{ color: #e60008;}

/*** Headers & Titles ***/
.header-title{ background: url("../images/bg-title.gif") repeat-x scroll 0 50% transparent;margin-bottom: 45px; }
	.header-title span{ 	color: #313948; font-size: 18px; font-family: 'MuseoSlab500Regular';   background: #f2f3f3  url("../images/header-redbar.gif") no-repeat center right;  padding-right: 35px; }

.pageheader-title{ background: url("../images/pageheader-bg.gif") repeat-x scroll 0 50% transparent;margin-bottom: 45px; }
	.pageheader-title span{ 	color: #313948; font-size: 20px; font-family: 'MuseoSlab500Regular';   background: #f2f3f3;  padding-right: 20px; }
	
/*** more links ***/	
.more{margin-top: 0px;  display: block;}
	.more a { background: url("../images/more-arrow.gif") no-repeat scroll 0% 50% transparent; font-size: 13px; text-decoration: none; 
		font-family: 'MuseoSlab500Regular', serif; color: #313948;float: right; font-weight: 400; padding-left: 15px; }	
	
.more-runningtext{	margin-top: 5px; display: block; margin-bottom: 20px;}
	.more-runningtext a { background: url("../images/more-arrow.gif") no-repeat scroll 100% 50% transparent;
		float: left; color: #303030; font-weight: normal; font-style: normal; padding: 0 14px 0 0;font-weight: 400; text-decoration: none; }

	.more a:hover, .more-runningtext a:hover{color: #e60008;background: url("../images/more-arrow-hover.gif") no-repeat scroll 0% 50% transparent;}

.contactbtn{
	background: url("../images/ourpromisebg.gif") repeat scroll 0 0 transparent;
	padding: 5px 7px;
	color: #313948;
	 -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
}
.contactbtn:hover{color:#E60008;
}

/********************************************/
/******** Base Grid Based Layout ************/
/********************************************/
.full{width: 100%}
.half{ width: 48%;}
.half .half{ width: 48%;}
.one-third { width: 30.6666%;}
.two-third{width: 65.3332%;}
.portfolio-description { width: 38.6666%;}
.portfolio-slider{width: 57.3332%;}
.one-fourth { width: 22%;}
.full, .half, .one-third, .two-third, .one-fourth, .portfolio-description , .portfolio-slider{
    float: left;   
    margin-right: 4%;
    position: relative;
}
.last{margin-right: 0 !important;}
.full {margin-right: 0 !important;}

.margin{	margin-top: 70px;}
.marginsmall{	margin-top: 50px;}
.marginlarge{	margin-top: 90px;}

.floatright{float: right;}
.floatleft{float: left;}


/********************************************/
/********** Site Layout & Elements **********/
/********************************************/
body{ margin: 0; padding: 0; text-align: center; background: #f2f3f3; font-size: 13px; width: 100%; line-height: 21px; 
	text-align: justify;font-family: 'PT Sans', sans-serif; font-size: 14px;color: #3d3d3d;  }

#header{position: relative; max-width: 1024px; min-width: 280px;  margin: 0 auto; height: 150px; border-bottom: 3px solid #e60008;background: url("../images/triangle-topright.gif") no-repeat top right; }

	#logo-bg{ background: url("../images/logo-bg.jpg") no-repeat; position: absolute; left: -144px; width: 667px; height: 147px;z-index: 1; }

	#header-content{position: absolute; z-index: 20; height: 150px; width: 100%}
		#logo{width: 202px; height:147px; max-width: 50%; display: block; margin: -40px 0 0 36px;float: left; }
		#headericons{float: right; margin: 16px 19px 0 0; height: 24px;}
			.headericon-phone{	width: 24px; height: 24px; background: url("../images/headericon-phone.png") no-repeat; display: block; float: right; }
			.headericon-mail{	width: 24px; height: 24px; background: url("../images/headericon-mail.png") no-repeat; display: block; float: right; margin-left: 8px;}
			.headericon-address{	width: 24px; height: 24px; background: url("../images/headericon-address.png") no-repeat; display: block; float: right; margin-left: 8px;}

			
/******** Mainmenu ********/
#mainmenu{ float: right; margin: 34px 19px 39px 0;width: 60%;}
	#mainmenu ul{float: left;width: 100%;text-align: right;}
		#mainmenu ul li{float: right; margin-left: 3%;}
		#mainmenu ul li.first{margin-left: 0;}
			#mainmenu ul li a{color: #313948; font-family: 'MuseoSlab500Regular', sans-serif; font-weight: normal; font-style: normal; font-size: 15px; padding-bottom: 7px; }
			#mainmenu ul li a:hover, #mainmenu ul li a.active{border-bottom: 5px solid #e60008; text-decoration: none; color: #e60008; }
			#mainmenu ul li a:hover{border-bottom: none;}
			#mainmenu ul li a.active:hover{border-bottom: 5px solid #e60008;}

			#mainmenumobile{display: none;}

/********** Submenu *******/
.submenu{ padding: 30px 0 0 0;}
.submenu a{font-family: 'MuseoSlab500Regular', serif; font-size: 16px; color: #313948; margin: 0 7px; }
.submenu a:hover, #content .submenu a.active{color: #E60008;}
.submenu a.first{margin-left: 0px;}
	
	
/*** Projectpage backtoall link***/
.submenu a.backtoall{font-family: 'MuseoSlab500Regular', serif; 	font-size: 16px; color: #313948; margin: 0 7px 0 0;
	color: #E60008; background: url("../images/backarrow.gif") no-repeat center left; padding-left: 20px}
	.submenu a.backtoall:hover{color: #313948;}

.portfoliomenu{ margin-top: -10px;}
	.portfoliomenu li{float: left;}
	.portfoliomenu a{font-family: 'MuseoSlab500Regular', serif; 	font-size: 14px; color: #313948; margin: 0 7px; }
	.portfoliomenu a:hover, .portfoliomenu li.active a{color: #E60008;}
	.portfoliomenu a.first{margin-left: 0px;}

				
/*** Slider ***/	
#slider{position: relative; text-align: center; width: 100%;background: url("../images/lined-bg.gif") repeat; overflow: hidden; margin: 0 auto; }
	#slider .slidercontent{ max-width: 1024px; padding: 0; min-width: 300px; margin: 0 auto; text-align: left; font-family: 'MuseoSlab500Regular', sans-serif; color: #f2f3f3; font-size: 24px; position: relative;}
	
				

/**************************************/
/********** Layout Elements **********/
/**************************************/

#wrapper{position: relative; max-width: 1024px; min-width: 280px;  margin: 0 auto; height: 150px;  }
.home #wrapper{ border-top:3px solid #e60008;  }

.slogan{background: url("../images/slogan-bg.gif"); display: block; width: 1030px; max-width: 100%; height: 130px;margin-top: 24px; position: relative;}
	.slogan .content{ width: 940px; max-width: 95%; margin: 0 auto;}
	.slogan h1{ color: #313948; font-family: 'MuseoSlab500Regular', sans-serif; font-size: 30px;margin-top: 7px;float: left;}
	.slogan span.findoutmore{float: right; margin-right: 15px;color: #313948; font-family: 'MuseoSlab500Regular', sans-serif; font-size: 14px;margin-top: 10px; }
	
	.slogan .icons{float: right; margin-top: -20px; color: #313948; font-family: 'MuseoSlab500Regular', sans-serif; font-size: 14px; margin-right: 10px; margin-left: 30px; }
	.slogan  .icons span{margin: 0 auto; display: block; width: 58px; height: 59px;}
	.slogan .icons span.icon-production{background: url("../images/production-icon.gif") top;}
	.slogan .icons span.icon-design{background: url("../images/design-icon.gif") top;}
	.slogan  .icons span.icon-products{display: block; background: url("../images/products-icon.gif") top;}

	.slogan .icons a {color: #3c4658;}
	.slogan .icons a:hover span {background-position: bottom;}
	.slogan .icons a:hover{text-decoration: none; color:#e60008;}
	
#content{ width: 940px; max-width: 95%; padding: 0; margin: 0 auto; }

.divider{  width: 100%;height: 5px; background: url("../images/pageheader-bg.gif") repeat;display: block;margin-top: 50px; }


/**** Blockquote - striped circles ****/
.blockquote{background: white url("../images/blockquotebg.gif") repeat; border: 8px solid white; padding: 22px; -webkit-box-shadow: 1px 1px 2px #8095bd;    
	-moz-box-shadow: 1px 1px 2px #8095bd; box-shadow: 1px 1px 2px #8095bd; margin-bottom: 20px; margin-top: 10px;}
      
	  
/*************************/
/**** STANDARD HEADER ****/
/*************************/

#standard-header{ position: relative; text-align: center; width: 100%; height: 115px; background: url("../images/lined-bg.gif") repeat; overflow: hidden; 
margin: 0 auto; }
#standard-header .headercontent{  max-width: 95%; width: 940px; padding: 0; margin: 0 auto; text-align: left; font-family: 'MuseoSlab500Regular', sans-serif;
	color: #f2f3f3; font-size: 24px; margin-top: 47px;text-transform: uppercase;}
#standard-header .breadcrumb{float: right; font-size: 13px;}
#standard-header .breadcrumb a{color: #f2f3f3;}
#standard-header .breadcrumb a:hover{border-bottom: 1px dotted #f2f3f3;}


/**** Our Promise bar ****/
/*** just above footer **/
#ourpromise{  border-top: 1px solid #c9c9c9; margin-top: 60px; background: url("../images/ourpromisebg.gif") repeat;
		font-family: 'MuseoSlab500Regular', serif; font-size: 15px; color: #313948; }
	#ourpromise #content{ width: 940px; max-width: 90%; margin: 0 auto; padding: 45px 0 45px 0;}
	#ourpromise h1{font-size: 20px; text-transform: uppercase;}
	
	
/****** FOOTER ELEMENTS *****/
#footer{ background: none repeat scroll 0 0 #34383f; text-align: left; color: #9da1a5; padding:0 0 0 0;  }
#footer #content{  width: 940px; min-width: 300px; margin: 0 auto; padding: 45px 0 45px 0;}
#footer .patternborder{width: 100%; height: 10px; background: url("../images/lined-bg.gif") repeat;}
#footer .bottommenu{  max-width: 940px; min-width: 290px; margin: 0 auto; padding: 10px 0 20px; border-top: 1px solid #3c4658;}
#footer .bottommenu a{color: #9DA1A5;}
#footer .bottommenu .content{ font-size: 13px; font-family: 'MuseoSlab500Regular', serif; max-width: 95%; margin: 0 auto; color:#9DA1A5;}

.footer-label{font-family: 'MuseoSlab500Regular', serif; padding-left: 10px; color: #dedede; font-size: 16px;background: url("../images/footer-reddots.gif") no-repeat scroll 0% 50%;}
.footer-em{color: #dedede; font-size: 13px;}
.footer-phone{background: url("../images/footericon-phone.png") no-repeat; padding-left: 32px; height: 24px; display: block;margin-bottom: 7px;color: #f2f3f3; }
.footerphone-link:hover .footer-phone{background: url("../images/footericon-phone.png") no-repeat;}
.footer-fax{background: url("../images/footericon-fax.png") no-repeat; padding-left: 32px; height: 24px; display: block;margin-bottom: 7px;color: #f2f3f3; }
.footerfax-link:hover .footer-fax{background: url("../images/footericon-fax.png") no-repeat;}
.footer-mail{background: url("../images/footericon-mail.png") no-repeat; padding-left: 32px; height: 24px; display: block;margin-bottom: 7px;color: #f2f3f3; }
.footermail-link:hover .footer-mail{background: url("../images/footericon-mail.png") no-repeat;}
.footer-address{background: url("../images/footericon-address.png") no-repeat; padding-left: 32px; height: 24px; display: block;margin-bottom: 7px;color: #f2f3f3; }
.footeraddress-link:hover .footer-address{background: url("../images/footericon-address.png") no-repeat;}
.footer-address:hover, .footer-mail:hover, .footer-fax:hover, .footer-phone:hover{color: #e60008;text-decoration: none}

#footer .learnmore{ color: #dedede;font-family: 'MuseoSlab500Regular', serif; font-size: 14px; background: url("../images/footer-morearrow.gif") no-repeat scroll 100% 58%; padding-right: 15px; }
	#footer .learnmore:hover{ color: #e60008; background: url("../images/footer-morearrow-hover.gif") no-repeat scroll 100% 58%; padding-right: 15px; }
	#footer a.active{color: #DEDEDE;}
#footer h4{color: #f2f3f3;}
#footer.bottommenu a{color:#313948;font-weight: bold;font-family: 'PT Sans', sans-serif; font-weight: 400; font-style: normal; }
	#footer .bottommenu a:hover, #footer .bottommenu a.active{color:#fff;}


/*********HOME ELEMENTS **************/
.aboutus-fader{position: relative;}


.aboutus-fader p{ background: #3c4658; padding: 30px 35px; color: #f2f3f3; margin: 0; padding-bottom: 50px;  }
.aboutus-fader .quote-1,.aboutus-fader .quote-2, .aboutus-fader .quote-3{position: absolute; top: 0; left: 0; }
.aboutus-fader .quote-1 img,.aboutus-fader .quote-2 img,.aboutus-fader .quote-3 img{margin-left: 33px; display: block; margin-bottom: 8px;}
.aboutus-fader  .label{font-family: 'MuseoSlab500Regular', serif; font-size: 16px; color:#e60008;}
.aboutus-fader .quote-1{ z-index: 1;}
.aboutus-fader .quote-2{ z-index: 2;}
.aboutus-fader .quote-3{ z-index: 3;}
.aboutus-fader .learnmore{ display: block; float: left; margin-top: 8px;  color: #f2f3f3;font-family: 'MuseoSlab500Regular', serif; font-size: 13px; background: url("../images/footer-morearrow.gif") no-repeat scroll 100% 58%; padding-right: 15px; }
	.aboutus-fader .learnmore:hover{ color: #e60008; background: url("../images/footer-morearrow-hover.gif") no-repeat scroll 100% 58%; padding-right: 15px; }
.aboutusmobile .learnmore{ display: block; float: left; margin-top: 8px;  color: #e60008;font-family: 'MuseoSlab500Regular', serif; font-size: 13px; background: url("../images/learnmorearrow.gif") no-repeat scroll 100% 58%; padding-right: 15px; }
	.aboutusmobile .learnmore:hover{ color: #3c4658; background: url("../images/learnmorearrow.gif") no-repeat scroll 100% 58%; padding-right: 15px; }

/**** SLIDER *****/
.slideritem{position:absolute; width:43%; height: 100%; left: 0px; top: 0px}	
.slideritem h1{	position:absolute; color:#dd0008; top:-200px; margin-left: 30px; font-size: 26px; background: #f2f3f3; padding: 13px 15px;}
.slideritem h2{	color:#f2f3f3; position:absolute;top:-200px; margin-left: 30px; font-size: 16px; background: #dd0008; padding: 13px 15px;}
.slideritem p{font-size: 14px;font-family: 'PT Sans', sans-serif;position:absolute; top:-200px; margin-left: 30px}
				

/********* ABOUT US ELEMENTS *********/

/*** Partner Logos ***/
a.biesterfeld{ display: block; background: url("../images/biesterfeldlogo.jpg") no-repeat top; height: 55px; width: 103px; float: left;	}
a.basf{  display: block; background: url("../images/basflogo.jpg") no-repeat top; height: 55px; width: 112px; float: left; }
a.symex{  display: block; background: url("../images/symexlogo.jpg") no-repeat top; height: 57px; width: 121px; float: left; }
a.evonik{  display: block; background: url("../images/evoniklogo.jpg") no-repeat top; height: 46px; width: 121px; clear: both; float: left; }
a.clariant{  display: block; background: url("../images/clariantlogo.jpg") no-repeat top; height: 46px; width: 94px; float: left; }
a.mira{  display: block; background: url("../images/miralogo.jpg") no-repeat top; height: 101px; width: 66px; float: left; }
a.symrise{  display: block; background: url("../images/symriselogo.jpg") no-repeat top; height: 57px; width: 139px; float: left; }

#partnerlogos a:hover{background-position: bottom}

/**** Keypoints - What we offer ****/
.mainpoints li{ font-family: 'MuseoSlab500Regular', serif; color: #313948; font-size: 15px; padding: 4px 0 2px 14px; margin: 15px 0 18px 5px;
	border-left: 5px solid #313948; display: block;background: url("../images/list-triangle.gif") no-repeat 100% 0%; }
.mainpoints li:hover, .mainpoints li.active {color:#f2f3f3; background: #e60008 url("../images/list-triangle-hover.gif") no-repeat 100% 0%;}

.mainpoints-aboutus li{
	font-family: 'MuseoSlab500Regular', serif; color: #313948; font-size: 15px; padding: 4px 0 2px 225px; margin: 15px 0 18px 9px;
	border-left: 5px solid #313948; display: block;background: url("../images/list-triangle.gif") no-repeat 100% 0%; }
.mainpoints-aboutus li:hover, .mainpoints-aboutus li.active {color:#f2f3f3; background: #e60008 url("../images/list-triangle-hover.gif") no-repeat 100% 0%;}


/********* PRODUCTION ELEMENTS*********/
.productionslider li .caption{position: absolute; width: 100%; height: 98px; background: url("../images/productionimgoverlay.png") no-repeat;
	color: white; bottom: 0px; left: 0px; margin: 0; padding: 20px; text-align: left; }

	.productionslider li p{width: 75%; }
	
	/**** 3 Production Points ****/
	.production-thirds .header-title{ margin-bottom: 20px}
	.production-thirds .header-title span{  font-family: 'MuseoSlab500Regular'; font-size: 18.21px;  }
	.production-thirds h2{  font-family: 'MuseoSlab500Regular';  color: #e60008; font-size: 18.21px;  padding-bottom: 15px; }
	.production-thirds h3{   font-family: 'PT Sans', sans-serif; color: #e60008;    font-size: 13px;  padding-bottom: 8px; font-weight: 700;}

	.design-fourths h3{  font-family: 'MuseoSlab500Regular', serif;  color: #222222; font-weight: 700;  font-size: 16px;   padding-top: 5px; margin-bottom: 3px;}
	.design-fourths:hover h3{color: #293795;}


/***** BRANDING PAGE ELEMENTS *****/
a.discoverourphotographer{position: absolute; bottom: 20px; right: 40px;}

/**** 4 Branding Points ****/
.one-fourth .strategyicon{ margin: 0 auto; background: url("../images/designicons.gif") 0 0; width: 36px; height: 36px; display: block; }
.one-fourth:hover .strategyicon{ background-position: 0 36px; }
.one-fourth  .creativityicon{ margin: 0 auto;background: url("../images/designicons.gif") 36px 0; width: 36px; height: 36px; display: block;}
.one-fourth:hover  .creativityicon{ background-position: 36px 36px; }
.one-fourth  .qualityicon{margin: 0 auto; background: url("../images/designicons.gif") 72px 0; width: 36px; height: 36px; display: block; }
.one-fourth:hover  .qualityicon{ background-position: 72px 36px; }
.one-fourth  .careicon{margin: 0 auto; background: url("../images/designicons.gif") 108px 0; width: 36px; height: 36px; display: block; }
.one-fourth:hover  .careicon{ background-position: 108px 36px; }

/***** PROJECT PAGE ELEMENTS *****/
a.websitelink{color: #3c4658;font-family: 'MuseoSlab500Regular', serif; font-size: 14px; display: block; background: url("../images/websiteicon.jpg") no-repeat; height: 38px; padding-left: 60px; padding-top: 10px; margin-bottom: 10px;}
a.folderlink{color: #3c4658;font-family: 'MuseoSlab500Regular', serif; font-size: 14px; display: block; background: url("../images/foldericon.jpg") no-repeat; height: 38px; padding-left: 60px; padding-top: 10px; margin-bottom: 10px;}
a.websitelink:hover, a.folderlink:hover{text-decoration: none; color:#e60008;}

/************* CONTACT PAGE****************/
.contacticon-phone{	padding-left: 40px; height: 30px; background: url("../images/headericon-phone.png") no-repeat; display: block; }
.contacticon-fax{			padding-left: 40px; height: 30px;background: url("../images/headericon-fax.png") no-repeat; display: block; }
.contacticon-address{		padding-left: 40px; 	height: 30px; background: url("../images/headericon-address.png") no-repeat; display: block; }
h1.contact{font-family: 'MuseoSlab500Regular', serif; font-size: 30px; color: #E60008; padding-bottom: 25px; margin-top: 20px}
h2.contact{font-family: 'PT Sans', sans-serif; font-size: 18px;color: #3d3d3d;padding-bottom: 15px;}
table.contact td{height: 25px}

.visitusbar{ position: absolute; top: 2.3%; left: 15%;}

.slidercontainer{
width: 92%; float: left}

.tablet{display: none;}

/*** Overlay ***/
/* the overlayed element */
.apple_overlay { 
    /* initially overlay is hidden */
    display:none;
 
    /* growing background image */
    background-image:url("../images/appleoverlay.png"); position: relative;
    
	/* width after the growing animation finishes height is automatically calculated */
    width:846px;
 
    /* some padding to layout nested elements nicely  */
    padding-left:16px; padding-top: 15px;
 
    /* a little styling */
    font-size:11px; line-height: 21px; text-align: justify;font-family: 'PT Sans', sans-serif; font-size: 14px;color: #3d3d3d; 
}

.apple_overlay .details{ position: absolute; top: 50px; left: 50px; width: 40%; }
 
/* default close button positioned on upper right corner */
.apple_overlay .close {
    background-image:url('http://jquerytools.org/media/img/overlay/close.png'); position:absolute; right:-5px; top:-5px;
    cursor:pointer; height:35px; width:35px; }

	
/******* BX Slider projects ****/
.bx-prev {left: -30px; top: 45%}
.bx-next {right: -30px; top: 45%}
.bx-prev{ outline: 0 none; position: absolute; text-indent: -9999px;width: 13px; height: 20px; z-index: 9999; background: url("../images/simpleslider-arrows.jpg") bottom right no-repeat; cursor: pointer; display: block; }
	.bx-prev:hover{background-position: top right;}
.bx-next{ outline: 0 none; position: absolute; text-indent: -9999px; width: 13px; height: 20px; z-index: 9999; background: url("../images/simpleslider-arrows.jpg") bottom left no-repeat; cursor: pointer; display: block; }
	.bx-next:hover{background-position: top left;}

.productsslider  .bx-prev {left: 0px; top: 35%}
.productsslider  .bx-next {right: 0px; top: 35%}

.aboutusmobile{display: none}
.mobile{display: none}
/*************************************/
/****** RESPONSIVE STYLING ***********/
/*************************************/

@media only screen and (min-width: 0px) and (max-width: 400px) {
body{text-align: left}
	.mediumres{display: none}
	#footer .one-third{width: 100%;}
	.visitusbar{ position: absolute; top: 0.5%; left: 15%}
	.slidercontainer{width:75%; float: left; margin-left: 10%}
	.bx-prev {left: -30px; top: 45%}
	.bx-next {right: -20px; top: 45%}
	#headericons{display: none;}
	#logo{margin: 0 auto;margin-top: 0px !important; z-index: 1; max-width: 80% !important;}
	#mainmenumobile{margin-top: -50px !important;}
}

@media only screen and (min-width: 400px) and (max-width: 600px) {
body{text-align: left}
	#footer .one-third{width: 43%;}
		.visitusbar{ position: absolute; top: 2.5%; left: 15%; font-size: 20px;}
	
}

@media only screen and (min-width: 0px) and (max-width: 600px) {

#ourpromise{ margin-top: 20px;}

	body{font-size: 13px}
	
	.header-title{ background: none;margin-bottom: 35px; text-align: left;}
	.header-title span{ 	text-decoration: underline; color: #313948; font-size: 18px; font-family: 'MuseoSlab500Regular';   background: none; padding: none; }
	

			
	/*************************/
/**** STANDARD HEADER ****/
/*************************/
#standard-header{height: 85px; }
#standard-header .headercontent{ font-size: 20px;margin-top: 33px}
#standard-header .breadcrumb{display: none;}

/********** Submenu *******/
.submenu{ padding: 20px 0 0 0;}
.submenu a{font-size: 14px; margin: 0 5px; }

	
/*** Projectpage backtoall link***/
.submenu a.backtoall{font-size: 14px; }




/* Styles */
	.slogan{height: 164px; background: url("../images/slogan-bg-bigger.gif") repeat scroll 0 0 transparent;}
	.slogan .content{text-align: center;margin: 0 auto;}
	.slogan span.findoutmore{display: none; }
	.slogan h1{ color: #313948; float: none; font-family: 'MuseoSlab500Regular', sans-serif; font-size:20px; margin: 0 auto;margin-top: -17px; }
	.slogan .icons.first{margin-top: -20px; color: #313948; font-family: 'MuseoSlab500Regular', sans-serif; font-size: 13px; margin-left: 0px  }
	.slogan .icons{float: left; margin-top: -20px; color: #313948; font-family: 'MuseoSlab500Regular', sans-serif; margin-right: 0px; font-size: 14px; margin-left: 10px; margin-left: 10px; }
	.centericons{margin: 0 auto;  float: none;clear: both;display: block;height: 50px;width: 225px; margin-top: 10px;}
	
	#header{height: 150px; }

		#logo-bg{ display: none; }
		#logo{margin: 0 auto; margin-left: 15%; margin-top: -45px; z-index: 1;}

	#header-content{position: absolute; z-index: 20; height: 150px; width: 100%; z-index: 5;}
		#headericons{float: right; margin: 16px 19px 0 0; height: 24px;}
			.headericon-phone{	width: 24px; height: 24px; background: url("../images/headericon-phone.png") no-repeat; display: block; float: right; }
			.headericon-mail{	width: 24px; height: 24px; background: url("../images/headericon-mail.png") no-repeat; display: block; float: right; margin-left: 8px;}
			.headericon-address{	width: 24px; height: 24px; background: url("../images/headericon-address.png") no-repeat; display: block; float: right; margin-left: 8px;}

			.mainpoints li{ background-image: none;font-size: 13px } /* remove triangle */
			.mainpoints li:hover, .mainpoints li.active {background-image: none;font-size: 13px} /* remove triangle */
			
			.aboutus-fader{display: none}
			.aboutusmobile{display: block}
	

	
/********************************************/
/******** Base Grid Based Layout ************/
/********************************************/
.full{width: 100%}
.half{ width: 100%;}
.half .last{margin-top: 50px; clear: both;}
.half .half{ width: 48%;}
.one-third { width: 100%;}
.two-third{width:100%;}
.portfolio-description { width: 38.6666%;}
.portfolio-slider{width: 57.3332%;}
.one-fourth { width: 45%;}
.clearmobile{clear: both; height: 25px}
.second{margin-right: 0;}

.full, .half, .one-third, .two-third, .one-fourth, .portfolio-description , .portfolio-slider{
    float: left;   
    margin-right: 4%;
    position: relative;
}
.last{margin-right: 0 !important;}
.full {margin-right: 0 !important;}

.margin{	margin-top: 25px;}
.marginsmall{	margin-top: 15px;}
.marginlarge{	margin-top: 40px;}

.floatright{float: right;}
.floatleft{float: left;}

#mainmenumobile{display: block; width: 100px; float: right; margin-right:25px; margin-top: 15px; }
#mainmenumobile ul ul{width: 120px; margin-left: -85px; text-align: right;
 }
#mainmenumobile ul li{float: right}
#mainmenumobile ul ul li {-webkit-box-shadow: 1px 1px 2px #8095bd;    
	-moz-box-shadow: 1px 1px 2px #8095bd; box-shadow: 1px 1px 2px #8095bd; background: #F2F3F3;padding: 5px 10px;float:right; clear: right; width: 120px; }
#mainmenumobile ul{font-family: 'MuseoSlab500Regular', serif;}
#mainmenumobile ul ul li a{color: #313948;}
#mainmenumobile ul ul li a:hover, #mainmenumobile ul ul li a.active{color: #e60008;}
#mainmenu{display: none}
#mainmenumobile ul ul{display: none;}
#mainmenumobile ul li:hover{color: #e60008}
#mainmenumobile ul li:hover ul{display: block}

.bigres{display: none;}
.mobile{display: block;}

#ourpromise{ font-size: 13px;  }
	#ourpromise #content{ max-width: 95%; margin: 0 auto; padding: 25px 0 25px 0;}
	#ourpromise h1{font-size: 22px; text-transform: uppercase;}
	
	}
	
	@media only screen and (min-width: 600px) and (max-width: 768px) {
	.bx-prev {left: -20px; top: 45%}
.bx-next {right: -20px; top: 45%}

			.slogan span.findoutmore{display: none; }
			.slogan h1{  font-size:25px;}
			.slogan .icons{margin-right: 2%; margin-left: 1%;}
			
			.mainpoints li{ background-image: none; } /* remove triangle */
			.mainpoints li:hover, .mainpoints li.active {background-image: none;} /* remove triangle */
			
			.aboutus-fader p {   padding: 15px 15px 35px;}
			.visitusbar{ position: absolute; top: 1%; left: 15%; font-size: 20px;}
			#mainmenumobile{display: block; width: 100px; float: right; margin-right:25px; margin-top: 34px; }
#mainmenumobile ul ul{width: 100px; margin-left: -80px; text-align: right}
#mainmenumobile ul li{float: right}
#mainmenumobile ul ul li {background: #F2F3F3; padding: 5px;float:right; clear: right; width: 120px; }
#mainmenu{display: none}
#mainmenumobile ul ul{display: none;}
#mainmenumobile ul li:hover{color: red}
#mainmenumobile ul li:hover ul{display: block}
			.tablet{display: block;}
			.computer{display: none;}
				.header-title{ background: none;margin-bottom: 35px; text-align: left;}
	.header-title span{ 	text-decoration: underline; color: #313948; font-size: 18px; font-family: 'MuseoSlab500Regular';   background: none; padding: none; }
	h2{text-align: left}
	
	.slideritem p{display: none;}
	}

		@media only screen and (min-width: 768px) and (max-width: 950px) {
			.header-title{ background: none;margin-bottom: 35px; text-align: left;}
	.header-title span{ 	text-decoration: underline; color: #313948; font-size: 18px; font-family: 'MuseoSlab500Regular';   background: none; padding: none; }
	
	.tablet{display: block;}
			.computer{display: none;}
			.slogan span.findoutmore{display: none; }
					#logo{margin-left: 10px; max-width: 40%; }

			/******** Mainmenu ********/
			#mainmenu{ float: right; margin: 34px 10px 10px 0;width: 57%;}
				#mainmenu ul{float: left;width: 100%;text-align: right;}
					#mainmenu ul li{float: right; margin-left: 2%;}
					#mainmenu ul li.first{margin-left: 0;}
						#mainmenu ul li a{color: #313948; font-family: 'MuseoSlab500Regular', sans-serif; font-weight: normal; font-style: normal; font-size: 14px; padding-bottom: 7px; }
						#mainmenu ul li a:hover, #mainmenu ul li a.active{border-bottom: 5px solid #e60008; text-decoration: none; color: #e60008; }
						#mainmenu ul li a:hover{border-bottom: none;}
						#mainmenu ul li a.active:hover{border-bottom: 5px solid #e60008;}
						
	}
