@charset "UTF-8";
@-ms-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}

.close-btn {
	font-size: 1.1em;
  display: block;
  padding: 0 20px 0 0;
  border: 0;
  outline: none;
  width: 80%;
  color: #fff;
  text-align: right;
  background: url(/images/design/icon-close.png) right no-repeat;
}
.close-btn:focus, .close-btn:hover {
/*  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;		*/
  text-decoration: none;
}

.nav-btn {
  display: block;
  width: 30px;
  height: 26px;
  padding: 0;
  border: 0;
  outline: none;
  background: url(/images/design/mobile-menu-icon.png);
  background-size: 30px 26px;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
}
.nav-btn:hover, .nav-btn:focus {
  background-position: bottom;
}

#outer-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
}

#inner-wrap {
  position: relative;
  width: 100%;
}

#nav {
	clear: both;
	
  z-index: 200;
  position: relative;
/*  overflow: hidden;		*/
  width: 100%;
  color: #fff;
}
#nav .close-btn {
  display: none;
}
#nav .block-title {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  
  display: none;
}
#nav .block {
  z-index: 2;
  position: relative;
}

/*** moved ***/

#top {
  z-index: 100;
  position: relative;
}
#top .nav-btn {
  position: absolute;
  top: 26px;
  right: 20px;
}

#main {

}
#main .block {

}

/* 	DESKTOP RULES : */

/*	@media screen and (min-width: 45.0625em) {			*/
/*	@media screen and (min-width: 480px) {				*/
/*	@media screen and (min-width: 580px) {				*/
/** @media screen and (min-width: 740px) {				**/
	@media screen and (min-width: 930px) {

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

  #nav .close-btn {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
		  /*** SUPER FISH - START - DUPLICATE IN IE.CSS ***/
		
		/*** ESSENTIAL STYLES ***/
		.sf-menu, .sf-menu * {
			margin:			0;
			padding:		0;
			list-style:		none;
			list-style-image: none;
		}
		.sf-menu {
			line-height:	1.0;
		}
		.ie7 .sf-menu, .ie6 .sf-menu {
			z-index: 999999;
			position: relative;
		}
		.sf-menu ul {
			position:		absolute;
			top:			-999em;
			width:			237px; /* left offset of submenus need to match (see below) */
		}
		.sf-menu ul li {
			width:			100%;
		}
		.sf-menu li:hover {
			visibility:		inherit; /* fixes IE7 'sticky bug' */
		}
		.sf-menu li {
			float:			left;
			position:		relative;
		}
		.sf-menu a {
			display:		block;
			position:		relative;
		}
		.sf-menu a:hover, .sf-menu img {
			transition: all .3s ease;
		   -o-transition: all .3s ease;
		   -moz-transition: all .3s ease;
		   -webkit-transition: all .3s ease;	
		}
		.sf-menu li:hover ul,
		.sf-menu li.sfHover ul {
			left:			0;
			top:			72px; /* match top ul list item height */
			z-index:		99;
		}
		ul.sf-menu li:hover li ul,
		ul.sf-menu li.sfHover li ul {
			top:			-999em;
		}
		ul.sf-menu li li:hover ul,
		ul.sf-menu li li.sfHover ul {
			left:			237px; /* match ul width */
			top:			0;
		}
		ul.sf-menu li li:hover li ul,
		ul.sf-menu li li.sfHover li ul {
			top:			-999em;
		}
		ul.sf-menu li li li:hover ul,
		ul.sf-menu li li li.sfHover ul {
			left:			237px; /* match ul width */
			top:			0;
		}
		
		/*** DEMO SKIN ***/
		
		.sf-menu { height: 72px; }
		.sf-menu ul { padding: 10px; background: #ff5b00; }
		.sf-menu ul ul { }
		.sf-menu li { font-size: 13px; line-height: 15px; width: 14.28%;  width: 12.5%; }
		.sf-menu li li { border-bottom: 1px dashed #fff; width: 100%; }
		.sf-menu li li li {  }
		.sf-menu a img { width: 100%; height: auto; }
		.sf-menu a span { display: none; }
		.sf-menu a:hover { background: #672382; padding-bottom: 2px; }
		.sf-menu #menu_two a:hover { background: #ff5b00; }
		.sf-menu #menu_three a:hover, .sf-menu #menu_three ul { background: #ffb200; }
		.sf-menu #menu_four a:hover, .sf-menu #menu_four ul { background: #ff2f92; }
		.sf-menu #menu_five a:hover, .sf-menu #menu_five ul { background: #2b2adc; }
		.sf-menu #menu_six a:hover, .sf-menu #menu_six ul { background: #ff2600; }
		.sf-menu #menu_seven a:hover, .sf-menu #menu_seven ul { background: #94c11f; }
		.sf-menu #menu_eight a:hover, .sf-menu #menu_eight ul { background: #2ba1dd; }
		.sf-menu a:hover img { margin-top: -5px; }
		.sf-menu ul a { padding: 8px 5px; text-decoration: none; color: #fff; font-weight: bold; }
		.sf-menu ul a:hover { padding: 8px 5px 8px 15px; }
		.sf-menu .has_subs a { }
		.sf-menu li li a {  }
		.sf-menu li li a:hover { /** background: #ff6600 !important; **/ }
		.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/ }
		.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { outline: 0; }
		.sf-menu li:hover a {  }
		.sf-menu a.active { background: #ff6600; }		
		.sf-menu .has_subs a.active, .sf-menu li.has_subs:hover a {  }
		.sf-menu li:hover li a { /** background: #ff5b00; **/ }
		.sf-menu li li:hover, .sf-menu li li.sfHover, .sf-menu li li a:focus, .sf-menu li li a:hover, .sf-menu li li a:active {  }
		
		/*** arrows **/
		.sf-menu a.sf-with-ul {
			padding-right: 	2.25em;
			min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
		}
		.sf-sub-indicator {
			position:		absolute;
			display:		block;
			right:			.75em;
			top:			1.05em; /* IE6 only */
			width:			10px;
			height:			10px;
			text-indent: 	-999em;
			overflow:		hidden;
			background:		url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
		}
		a > .sf-sub-indicator {  /* give all except IE6 the correct values */
			top:			.8em;
			background-position: 0 -100px; /* use translucent arrow for modern browsers*/
		}
		/* apply hovers to modern browsers */
		a:focus > .sf-sub-indicator,
		a:hover > .sf-sub-indicator,
		a:active > .sf-sub-indicator,
		li:hover > a > .sf-sub-indicator,
		li.sfHover > a > .sf-sub-indicator {
			background-position: -10px -100px; /* arrow hovers for modern browsers*/
		}
		
		/* point right for anchors in subs */
		.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
		.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
		/* apply hovers to modern browsers */
		.sf-menu ul a:focus > .sf-sub-indicator,
		.sf-menu ul a:hover > .sf-sub-indicator,
		.sf-menu ul a:active > .sf-sub-indicator,
		.sf-menu ul li:hover > a > .sf-sub-indicator,
		.sf-menu ul li.sfHover > a > .sf-sub-indicator {
			background-position: -10px 0; /* arrow hovers for modern browsers*/
		}
		
		/*** shadows for all but IE6 ***/
		.sf-shadow ul {
			background:	url('../images/shadow.png') no-repeat bottom right;
			padding: 0 8px 9px 0;
			-moz-border-radius-bottomleft: 17px;
			-moz-border-radius-topright: 17px;
			-webkit-border-top-right-radius: 17px;
			-webkit-border-bottom-left-radius: 17px;
		}
		.sf-shadow ul.sf-shadow-off {
			background: transparent;
		}
		
		  /*** SUPER FISH - END ***/




/* header -- moved from style_web.css */

#header_desktop { display: block; }
#header_mobile { display: none; }

#header_desktop { height: 52px; background: #ebebeb; }

#nav { display: none; }

#desktop_header_wrapper { position: relative;  }
#logo_kern { position: absolute; left: 0; top: 0; }
#cta_telephone { position: absolute; left: 110px; top: 14px; font-size: 1.5em;  left: 106px; font-size: 1.4em; }
#cta_telephone span { font-weight: normal; }

/* desktop megamenu */

.mega-menu ul, .mega-menu ul li {list-style: none; list-style-image: none; margin: 0; padding: 0; }
.mega-menu ul {position: relative; padding: 0; margin: 0;}
.mega-menu ul li ul {display: none;}
.mega-menu .sub {display: none;}
.mega-menu .sub ul { display: block; }

#mega-menu { font-size: 1.05em; list-style: none; position: relative; padding: 0; margin: 0; }
#mega-menu { width: 100%; height: 52px; position: relative; }
#mega-menu li { float: left; margin: 0; padding: 0;   float: right; }
#mega-menu li a { float: left; display: block; color: #565857; font-weight: 600; padding: 14px 11px 13px 11px; text-decoration: none; }
#mega-menu li.mega-hover a, #mega-menu li.mega-hover a:hover { color: #0167bb; }
#mega-menu li a:hover {  }

#mega-menu .hide_desktop { color: #f00 !important; }

#mega-menu li .sub-container { position: absolute; }
#mega-menu li .sub { background: url(/images/design/bkg_megamenu.png); padding: 15px 15px 0 15px; }
#mega-menu li .sub .row { width: 100%; overflow: hidden; clear: both; }
#mega-menu li .sub li { list-style: none; float: none; /** width: 170px; **/  /*** width: 19.2%; ***/  width: 15.8%; font-size: 0.85em; line-height: 100%; font-weight: normal; }
/**	#mega-menu li#menu_mailing-software .sub li { width: 19.2% !important; }		**/
#mega-menu li .sub li li { width: 100%; font-size: 1em; }
#mega-menu li .sub li.mega-hdr { /** margin: 0 10px 10px 0; **/ margin: 0 1% 15px 0; float: left; }
#mega-menu li .sub li.mega-hdr.last { margin-right: 0; }
#mega-menu li .sub a { background: none; color: #fff; padding: 0 0; display: block; float: none; }
#mega-menu li .sub li.mega-hdr a.mega-hdr-a { margin-bottom: 5px; font-weight: 600; }
#mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover { /** color: #7fb3db; **/ }
#mega-menu li .sub li.mega-hdr:hover a.mega-hdr-a { /**** color: #7fb3db; ****/ }
#mega-menu .sub li.mega-hdr li a { padding: 2px 0; font-weight: normal; }
#mega-menu .sub li.mega-hdr li a:hover { color: #7fb3db; }
#mega-menu .sub ul li { padding-right: 0; }

#mega-menu li .sub-container.non-mega .sub { padding: 15px; /** margin-left: -30px; **/ margin-left: -30px; }
#mega-menu li .sub-container.non-mega li { padding: 0; width: 174px; margin: 0; }
#mega-menu li .sub-container.non-mega li a { padding: 3px 0 3px 0; }
#mega-menu li .sub-container.non-mega li a:hover { color: #7fb3db; }

/** new re-styling */

#mega-menu li .sub { background: url(/images/design/bkg_megamenu_new.png); }

#mega-menu li.mega-hover a, #mega-menu li.mega-hover a:hover { background: #565857; color: #fff; }
#mega-menu li.mega-hover li a, #mega-menu li.mega-hover li a:hover { background: none; }

#mega-menu li .sub li { background: url(/images/design/menu_right_border.gif) right repeat-y; line-height: 120%; }
#mega-menu li .sub li li { background: none; }
#mega-menu li .sub li.mega-hdr.last { background: none; }
#mega-menu .sub li.mega-hdr li a, #mega-menu li .sub li.mega-hdr a.mega-hdr-a { padding-right: 8px; padding-left: 4px; }

#mega-menu li .sub li.mega-hdr a.mega-hdr-a { margin: 0 !important; padding-top: 8px !important; padding-bottom: 8px !important; height: auto !important; }
#mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover { color: #7fb3db; }

#mega-menu li .sub li.mega-hdr li a { padding-top: 8px; padding-bottom: 8px; padding-left: 10px; padding-right: 8px; }

#mega-menu li .sub-container.non-mega li { background: none; }

  
}

/* 	MOBILE RULES : */

/*	@media screen and (max-width: 45em) {				*/
/*	@media screen and (max-width: 480px) {				*/
/*	@media screen and (max-width: 580px) {				*/
/** @media screen and (max-width: 740px) {				**/

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

  #nav {
    position: absolute;
    top: 0;
/*    padding: 65px 0 0 0;			*/
    padding: 40px 0 0 0;
	
	overflow: hidden;
  }
  #nav:not(:target) {
    z-index: 1;
    height: 0;
  }
  #nav:target .close-btn {
    display: block;
  }
  #nav .close-btn {
    position: absolute;
    top: -30px;
    right: 0;
	text-transform: uppercase;
  }
  #nav .block {
    position: relative;
    padding: 0;
  }

/** moved from above **/

#nav ul {
  *zoom: 1;
  display: block;
	margin: 0 10px 0 10px;
	padding: 0;
}
#nav ul:before, #nav ul:after {
  content: "";
  display: table;
}
#nav ul:after {
  clear: both;
}
#nav li {
  display: block;
  margin: 0; padding: 0;
  font-size: 1.1em;
}
#nav li a {
  display: block;
  color: #fff;
/*  font-size: 0.875em;
  line-height: 1.28571em;
  font-weight: normal;
  outline: none;					*/
  height: 100%;
  text-decoration: none;
  font-weight: bold;
}
#nav li a:focus, #nav li a:hover {
/*  background: rgba(255, 255, 255, 0.1);		*/
  text-decoration: none;
}
#nav li.is-active a {
  color: #fff;
}

#nav ul ul {
	margin: 0; padding: 0 0 10px 0;
	border: none !important;
}
#nav ul ul li {
	border: none !important;
	font-size: 0.95em;
}
#nav ul ul li a {
	border: none !important;
}

/** moved from above **/

	#nav li {
    position: relative;
    border-top: 1px dashed #3a89ca;
	font-size: 1.3em;
	line-height: 120%;
  }
  #nav li li { font-size: 0.7em !important; }
  #nav li:last-child {
    border-bottom: 1px dashed #3a89ca;
  }
  #nav li.is-active:after {
    z-index: 50;
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: -0.03125em;
    margin-top: -0.625em;
    border-top: 0.625em transparent solid;
    border-bottom: 0.625em transparent solid;
    border-right: 0.625em white solid;
  }
  #nav li a {
    padding: 10px; font-weight: normal;
  }
  #nav li li a { padding: 4px 10px; }
  #nav li a img { display: none; }
  
  #nav li.has_subs a { background: url(/images/design/office-expander.png) 96% 50% no-repeat !important; background-size: 16px 16px !important; }
  #nav .sf-menu li:hover a, #nav .sf-menu li a:active, #nav .sf-menu li a:focus { /* font-weight: bold; !important; */ }
  #nav .sf-menu li.has_subs:hover a, #nav .sf-menu li.has_subs:hover a:active, #nav .sf-menu li.has_subs:hover a:focus { background-image: url(/images/design/office-contractor.png) !important; background-position: 96% 50% !important; background-repeat: no-repeat !important; background-size: 16px 16px !important }
  #nav li.has_subs li a { background: none !important; }
  #nav .sf-menu li.has_subs:hover li a { background-image: none !important; }
  #nav .sf-menu li:hover li a { background: none !important; }
  
  #nav .sf-menu li.sub_menu_indent { display: none; }

  .js-ready #nav {
    height: 100%;
    width: 95%;
    background: #0067bb;
    -webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    box-shadow: inset -0.9em 0 0.2em -0.75em rgba(0, 0, 0, 0.25);
  }
  .js-ready #nav .block {
    background: transparent;
  }
  .js-ready #nav .close-btn {
    display: block;
/*    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;				*/
  }
  .js-ready #nav .close-btn:focus, .js-ready #nav .close-btn:hover {
/*    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;			*/
  }

  .js-ready #nav {
    left: -95%;
  }
  .js-ready #inner-wrap {
    left: 0;
  }

  .js-nav #inner-wrap {
    left: 95%;
  }

  .csstransforms3d.csstransitions.js-ready #nav {
    left: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .csstransforms3d.csstransitions.js-ready #inner-wrap {
    left: 0 !important;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 500ms ease;
    -moz-transition: -moz-transform 500ms ease;
    -o-transition: -o-transform 500ms ease;
    transition: transform 500ms ease;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .csstransforms3d.csstransitions.js-nav #inner-wrap {
    -webkit-transform: translate3d(95%, 0, 0) scale3d(1, 1, 1);
    -moz-transform: translate3d(95%, 0, 0) scale3d(1, 1, 1);
    -ms-transform: translate3d(95%, 0, 0) scale3d(1, 1, 1);
    -o-transform: translate3d(95%, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(95%, 0, 0) scale3d(1, 1, 1);
  }

  .csstransforms3d.csstransitions.js-ready #nav .block {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
    -webkit-transition: opacity 300ms 100ms, -webkit-transform 500ms ease;
    -webkit-transition-delay: ease, 0s;
    -moz-transition: opacity 300ms 100ms ease, -moz-transform 500ms ease;
    -o-transition: opacity 300ms 100ms ease, -o-transform 500ms ease;
    transition: opacity 300ms 100ms ease, transform 500ms ease;
    -webkit-transform: translate3d(95%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -moz-transform: translate3d(95%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -ms-transform: translate3d(95%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -o-transform: translate3d(95%, 0, 0) scale3d(0.9, 0.9, 0.9);
    transform: translate3d(95%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
  }

  .csstransforms3d.csstransitions.js-nav #nav .block {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  
  
  
/* header - moved from style_web.css */

#header_desktop { display: none; }
#header_mobile { display: block; }

#header_mobile #header_mobile_logo { background: #ebebeb; height: 48px; border-top: 15px solid #fff; border-bottom: 4px solid #fff; }
#header_mobile #header_mobile_logo #logo_kern_mobile { height: 100%; width: auto; margin: 0 0 0 20px; }
#nav-tel { display: block; background: url(/images/design/icon-tel.png); width: 30px; height: 30px; text-indent: -9999px; background-size: 30px 30px; float: right; margin: 9px 65px 0 0; }

#nav { display: block; }

  
  
}