<style type="text/css">

/***************** 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;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}






/***************** GLOBALS *********************/
@font-face {
    font-family: 'open-sans-bold';
    src: url('/fonts/opensans-regular-webfont.eot');
    src: url('/fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/opensans-regular-webfont.woff2') format('woff2'),
         url('/fonts/opensans-regular-webfont.woff') format('woff'),
         url('/fonts/opensans-regular-webfont.ttf') format('truetype'),
         url('/fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open-sans';
    src: url('/fonts/opensans-light-webfont.eot');
    src: url('/fonts/opensans-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/opensans-light-webfont.woff2') format('woff2'),
         url('/fonts/opensans-light-webfont.woff') format('woff'),
         url('/fonts/opensans-light-webfont.ttf') format('truetype'),
         url('/fonts/opensans-light-webfont.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {font-family: proxima-bold; src: url(/fonts/proxima-extra-bold.otf);}
::selection { background: #0EA12F; }

.clear {clear: both;}
h1 {margin: 0; font-size: 50pt; color: #383838; font-family: 'open-sans-bold', arial, sans-serif;}
h2 {margin: 0; color: #383838; font-family: 'open-sans-bold', arial, sans-serif; padding: 10px 0 10px 0; font-weight: normal; font-size: 42pt; font-weight: bold;}
h3 {margin: 0; font-size: 18pt; color: #616161; font-family: 'open-sans', arial, sans-serif;}
h4 {margin: 0; font-size: 18pt; color: #0F7183; font-family: 'open-sans', arial, sans-serif; font-style: italic; padding-top: 20px;}
p {color: #616161; font-family: 'open-sans', Arial, sans-serif; font-size: 20px; line-height: 150%; margin: 0px;}
a {text-decoration: none; color: #2868a8; font-family: 'open-sans', arial, sans-serif;}
a:hover {color: #383838;}
body {background: #fff; margin: 0; width: 100%; position: relative; z-index: 1000;}
ul {color: #616161; font-family: 'open-sans', arial, sans-serif; line-height: 150%; font-size: 14pt;}
.white {background: #fff !important; z-index: -3 !important;}
.teal {background: #0F7183 !important;}
.dark-grey p {color: #5a5a5a !important;}
.larger {height: auto !important;}



/******************* HEADER ***********************/
.header {width: 100%; border-bottom: 1px solid #E3E7E9; position: fixed; z-index: 99999; top: 0; background: #FFF;}

.header-container {
	width: 1200px;
	margin: 0 auto;
	height: 93px;
	padding: 0;
}

div.logo {float: left; width: 370px;}

nav.nav {float: left;}


header {
	width: 100%;
	position: fixed;
	z-index: 99999;
	border-bottom: 1px solid #E3E7E9;
	-webkit-transition: height 0.3s;
	-moz-transition: height 0.3s;
	-ms-transition: height 0.3s;
	-o-transition: height 0.3s;
	transition: height 0.3s;
}

header .logo img {
	display: inline-block;
	height: 88px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

header nav a {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

header nav a:hover {color: white;}
header.smaller {height: 65px;}
header.smaller .logo img {height: 55px; margin-top: 5px;}
header.smaller .user {height: 65px; padding-top: 12px;}
header.smaller .user ul {margin-top: 3px;}
	
.clearfix:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;
 }






/**************** MENU ******************/
.nav {height: 93px; margin-left: 80px;}

*{box-sizing:border-box;}

.user-name{font-size:1.2rem; position:relative;}
.user-name a {color: #393939; font-size: 15pt; font-family: 'open-sans-bold', arial, sans-serif;}
.user-name a:hover {color: #000;}

.user{padding-top:30px; padding-left: 70px; height: 100%; float: left;}
.user:hover .user-nav {visibility:visible; opacity:1; top:2px}
.user p {color: #0F7183; font-size: 17pt; text-align: right;}

.user-nav{position:relative; visibility:hidden; opacity:0;-webkit-transition:all .15s; z-index: 1000; top:0;-webkit-transform: translate3d(0, 0, 0)}
.user-nav ul{position:absolute; width:180px; background:#0F7183; font-size: 15px; left:0px; color:#fff; top:11px; padding: 5px; padding-right: 0px; margin-left: -50px; box-shadow:rgba(0,0,0,.3) 0px 2px 4px; font-family: 'open-sans-bold', arial, sans-serif;}
.user-nav ul:after{
	content:"";
	display:block;
	width: 0; 
	height: 0; 
	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	border-bottom: 14px solid #0F7183;
	margin-right: 25px;
	top: -13px;
	left: 75px;
	position:absolute;
}

.user-nav ul li {display:block; text-align: center; padding:15px 0px 15px 0px; position:relative; background: #0F7183; color: #FFF; width: 98%; font-family: 'open-sans-bold', arial, sans-serif;}
.user-nav ul li:hover{
	background:#fff;
	color:#0F7183;
	-webkit-transition: all 0.3s;
	-moz-transition:    all 0.3s;
	-o-transition:      all 0.3s;
}
.user-nav ul li:hover span{background-position-x:-20px;}

.user-nav-settings{background-position-y:-20px;}
.user-nav-stats{background-position-y:-40px;}
.user-nav-messages{background-position-y:-60px;}
.user-nav-signout{background-position-y:-80px;}

.user-nav ul li span{
   position:absolute;
   right:22px;
   top:12px;
   display:block;
   height:20px;
   width:20px;
}

.user-menu{
   position:absolute;
   right:8px;
   top:0;
   display:block;
   height:20px;
  width:20px;
}

/* Mobile Menu */
#mobile-menu {
  display: none;
  width: 100%;
  position: relative;
}

#mobile-menu #navbtn {
  display: none;
  float: right;
  top: 0;
  width: 20px;
  height: 70px;
  background: url('/images/menu.png') center no-repeat;
  text-indent: -99999px;
  overflow: hidden;
  margin: 14px 20px 10px 5px;
}

#mobile-menu #topnav {
  position: absolute;
  top: 0; 
  right: 0px;
}

#topnav {
  list-style: none;
  padding-left: 0px;
  margin-top: 0px;
}
#topnav li {
  display: block;
  list-style: none;
  float: left;
  font-size: 1.4em;
  margin-right: 4px;
}

#topnav li a {
  display: block;
  text-decoration: none;
  line-height: 70px;
  color: #8ea188;
  font-weight: bold;
  padding: 0 10px;
  border-bottom: 2px solid #fff;

}
##topnav li a:hover {
  color: #6f8767;
  background: #ddecd9;
  border-bottom-color: #bdd8b5;
}






/**************** FOOTER *****************/
.footer {
	height: 200px;
	width: 100%;
	background: #f5f5f5;
	float: left;
	position: relative;
	border-top: 1px solid #E3E7E9;
}
.footer ul {list-style: none; padding-left: 0px; color: #adadad; font-size: 10pt;}

.footer-container {width: 1200px; margin: 0 auto;}

.footer-left {
	margin: 40px 0 0 0;
	width: 30%;
	float: left;
}

.footer-business-name {font-size: 16pt; font-weight: bold; color: #8b8b8b; font-family: 'open-sans-bold', arial, sans-serif;}

.footer-right {margin: 95px 0 0 40px; width: 35%; float: left;}
.footer-right a {padding-right: 48px; font-size: 10pt;}
.footer-right p {font-size: 10pt; color: #adadad;}

.footer-bottom {
	height: 15px;
	width: 100%;
	background-color: #D52513;
	float: left;
}






/**************** HOMEPAGE *******************/
div.homepage-main {
	background: url(../images/homepage/KnifeSafe-1.jpg) no-repeat center top; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 449px;
	z-index: 500;
	margin-top: 94px;
}

.main-left {
	width: 1200px;
	margin: 0 auto;
	height: 549px;
	z-index: 1000;
}

.homepage-h1 {padding: 120px 0 0 0;}
.homepage-h1 h1 {margin: 0; color: #FFF; font-size: 34pt; font-weight: 900;}

.homepage-h3 {padding: 5px 0 0 0;}
.homepage-h3 h3 {font-style: italic;}

.homepage-headline {padding: 40px 0 0 0;}
.homepage-headline p {color: #FFF;}

.homepage-button, #submit {
	background-color: #D52513;
	margin-top: 0px;
	border-radius: 2px;
	color: #FFF;
	display: inline-block;
	padding: 12px 25px 15px 25px;
	text-decoration: none;
	-webkit-box-shadow:inset 0px 0px 0px 1px transparent;
    -moz-box-shadow:inset 0px 0px 0px 1px transparent;
    box-shadow:inset 0px 0px 0px 1px transparent;
	text-transform: uppercase;
	border: none;
	font-family: 'open-sans-bold', arial, sans-serif;
}
	
.homepage-button:hover {
	background-color: #FFF;
	background-position: 87% 20%;
	color: #D52513;
	text-decoration: none;
	-webkit-box-shadow:inset 0px 0px 0px 1px #D52513;
    -moz-box-shadow:inset 0px 0px 0px 1px #D52513;
    box-shadow:inset 0px 0px 0px 1px #D52513;
	-webkit-appearance: none;
}

.homepage-button:after {
	content: '\00a0\00a0\203A';
	font-size: 22px;
}

.second {margin: 40px 0 0 0;}

.homepage-block {
	width: 100%;
	height: 425px;
	padding: 40px 0 0 0;
	position: relative;
	background: #f5f5f5;
	border-bottom: 1px solid #E3E7E9;
	z-index: 50;
}

.homepage-block p {font-size: 16pt; color: #777;}
.homepage-block ul {color: #777; font-size: 16pt;}

.homepage-block-container {
	width: 1200px;
	margin: 0 auto;
	overflow: auto;
}

.knifesafe-block-left {float: left; width: 63%; margin-left: 20px; height: 350px;}
.knifesafe-block-right {width: 30%; margin-top: 0px; float: right;}

.cordsafe-block-left {float: left; width: 57%; margin-left: 20px; height: 350px;}
.cordsafe-block-right {width: 40%; float: right; margin-top: 60px; text-align: right;}

.woman-block-left {float: left; width: 40%; margin-top: 60px;}
.woman-block-right {float: right; width: 58%;}
.woman-block-right h2 {color: #FFF; padding-top: 0px;}
.woman-block-right p {color: #FFF;}





/***************** LANDING PAGE GLOBALS ********************/
.lp-container {
	width: 1200px;
	margin: 0 auto;
	margin-bottom: 50px;
	margin-top: 100px;
}

.lp-top-section {
	height: 351px;
	display: block;
	position: relative;
}

.lp-title {float: left; margin: 105px 130px 0 50px;}
.lp-title h1 {color: #454545; font-size: 60pt;}
.lp-title h2 {padding: 10px !important; background: #D52513; font-style: italic; color: #FFF; font-weight: normal; font-size: 12pt; margin-top: 25px; font-family: 'open-sans', arial, sans-serif !important;}

.intro-video {float: left; margin-top: 50px;}


.first {padding-top: 0px; color: #383838; font-size: 42pt; margin-bottom: 40px; font-family: 'open-sans-bold', arial, sans-serif; line-height: 110%; font-weight: bold;}

.lp-left {
	width: 550px;
	float: left;
}

.lp-left p {margin-top: 20px;}
.lp-left ul {font-size: 14pt; width: 100%; color: #383838; float: left; margin-right: 30px; display: block;}
.lp-left img {margin-top: 20px;}

.lp-right {
	float: right;
	width: 500px;
}

.lp-full {width: 100%; padding-top: 20px;}

.left-big {float: left; display: block; margin-right: 25px; vertical-align: top; font-size: 100pt; color: #000; font-weight: bold; font-family: 'proxima-bold', arial, sans-serif;}
.percent {font-size: 40pt; vertical-align: middle;}
.top-margin {margin-top: 50px !important;}
.grey-background {background: #828282; color: #FFF; float: left; padding: 10px; font-size: 18pt; font-family: 'open-sans-bold', arial, sans-serif;}
.black h1 {color: #000;}





/******************** LANDING PAGE SPECIFIC ********************/
.contact-us-page {float: none; padding-top: 20px;}

.talking-left {float: left; width: 450px;}
.talking-right {float: right;}

.cordsafe-left {width: 100%;}
.cordsafe-left p {text-align: justify;}
.cordsafe-title h2 {background: #0f7183;}
.knifesafe-left ul {line-height: 180%; list-style: disc;}
.knifesafe-left img {border: 1px solid #CCC;}

.cordsafe-left ul {line-height: 180%;}
.cordsafe-left img {border: 1px solid #CCC;}

.thumbnail{float: left; width: 280px; height: 400px; margin: 0 24px 40px 0; background: #f9f9f9; border-left: 1px solid #ececec; border-bottom: 1px solid #dfdfdf; border-right: 1px solid #ececec; border-radius: 8px;}
.last {margin-right: 0px; float: right;}
.thumbnail-content {border-top: 4px solid #0F7183; border-radius: 4px; text-align: center; padding: 30px 0 20px 0;}
.thumbnail-content h3 {color: #383838; padding-top: 20px;}
.thumbnail-content i {color: #0F7183;}
.thumbnail-content p {font-size: 11pt; padding: 20px 10px 0 10px;}

.portfolio-brand-logo {height: 75px;}
.portfolio-brand-logo img {vertical-align: baseline;}

.thank-you-image {text-align: center;}

.contact-container {width: 1200px; margin: 0 auto; margin-top: 130px; margin-bottom: 50px;}
.about-kinneco-container {width: 1200px; margin: 0 auto; margin-top: 130px; margin-bottom: 50px;}
.testimonials-container {width: 1200px; margin: 0 auto; margin-top: 130px; margin-bottom: 50px;}


.error {margin-bottom: -3px;}
.minion {margin: 0 auto; margin-bottom: 0px; text-align: center;}






/******************** SLIDING CONTACT FORM *********************/
#contact-us-form {
	width: 550px;
	height: 400px;
	padding: 10px;
	border: 1px dashed #000;
}

#contact-us-form img {vertical-align: middle;}

.input-contact-us {width: 300px;}

.contact-us-area {width: 300px; height: 190px;}

#contact-scroller p {font-size: 11pt;}
#contact-scroller h4 {padding-bottom: 10px;}
#contact-scroller table {margin-top: 10px;}

#contact-anchor {position: absolute; top: 335px;}






/******************** RESPONSIVE CSS *********************/
@media screen and (max-width:768px){
	
	h2 {font-size: 32pt;}
	
	.nav {display: none;}
	.header {width: 100%;}
	.header-container {width: 100%;}
	div.logo {width: 220px;}
	.logo img {width: 220px; height: auto !important; padding-top: 15px;}
	
	header.smaller {height: 66px;}
    header.smaller .logo img {width: 150px; margin-top: 7px; padding-top: 2px;}
    header.smaller .user {height: 65px; padding-top: 12px;}
	header.smaller .user ul {margin-top: 3px;}
	header.smaller #mobile-menu #navbtn {margin-top: 10px; height: 50px; margin-bottom: 0px;}
	header.smaller #topnav{margin-top: -2px;}
	
	#mobile-menu {height: auto; display: block;}
	#mobile-menu #topnav { 
		display: none; 
		position: static;
		width: 100%;
		top: auto;
		right: auto;
		text-align: center;
	}
	#topnav li {float: none; margin: 0; font-size: 12pt !important;}
	#topnav li a {
		display: block;
		width: 100%;
		line-height: 2.4em;
		border: 0;
		padding: 0 10px;
		background: #0f7183;
		color: #FFF;
	}
	#topnav li a:hover {background: #FFF; color: #0f7183;}
	#topnav li a.sel {color: #FFF; background: #0f7183;}
	#mobile-menu #navbtn {display: block;}
	.darker a{background: #0a4d59 !important;}
	.darker a:hover {background: #FFF !important;}
	
	.footer {width: 100%; height: auto;}
	.footer-container {width: 100%; height: auto;}
	.footer-left {float: none; width: 95%; margin: 0 auto;}
	.footer-right {float: none; width: 95%; margin: 0 auto; padding-bottom: 10px;}
	.footer-right a {padding-right: 5%;}
	
	.homepage-main {height: auto !important;}
	.main-left {width: 90%; text-align: center;}
	.homepage-h1 {padding-top: 100px;}
	.homepage-block {width: 100%; height: auto; padding-bottom: 40px; text-align: center; margin: 0; overflow: hidden;}
	.homepage-block-container {width: 100%; height: auto; margin: 0 auto; text-align: center; overflow: hidden;}
	.homepage-block-right {float: none;}
	.homepage-block-left {float: none;}
	.knifesafe-block-left {width: 100%; margin-left: 0px; height: auto;}
	.knifesafe-block-right {width: 100%;}
	.cordsafe-block-left {width: 100%; margin-left: 0px; height: auto;}
	.cordsafe-block-right {width: 100%; text-align: center;}
	.woman-block-left {width: 100%; margin-left: 0px; height: auto;}
	.woman-block-right {width: 100%;}

	
	.lp-container {width: 100%;}
	.lp-top-section {background: none; height: auto; width: 97%; margin: 0 auto;}
	.lp-top-section img {max-width: 100%; height: auto;}
	.lp-title {margin: 0 auto; background: none; padding-left: 3%; padding-top: 5%; vertical-align: middle;}
	.lp-title h1 {font-size: 36pt;}
	.lp-title h2 {font-size: 10pt; margin-top: 5%; padding: 5px !important;}
	.lp-right {display: none;}
	.lp-left {width: 95%; padding-left: 3%;}
	.lp-left h4.first {font-size: 20pt; margin-top: 20px;}
	.lp-left p {font-size: 16px;}
	.lp-left ul {font-size: 16px; float: none;}
	.lp-left img {max-width: 100%; height: auto;}
	.left-big {font-size: 26pt !important; margin-top: 40px !important;}
	.top-margin {margin-top: 20px !important;}
	.lp-full h1 {text-align: center; width: 90%;}
	.lp-full h4 {text-align: center; width: 90%;}
	
	
	.contact-container {width: 97%; margin: 0 auto; margin-top: 130px; margin-bottom: 50px;}
	.contact-us-page {max-width: 100%;}
	#contact-us-form {max-width: 100%; height: auto; margin: 0 auto;}
	.contact-container p {font-size: 12pt !important;}
	.contact-container h1 {font-size: 32pt !important;}
	.contact-thank-you {width: 97%}
	.contact-thank-you img {max-width: 100%; height: auto;}
	.input-contact-us {width: 200px;}
	.contact-us-area {width: 200px; height: 190px;}
	.talking-left {float: none; width: 100%;}
	.talking-right {text-align: center; float: none;}
	.about-kinneco-container {width: 97%;}
	.about-kinneco-container p {font-size: 12pt !important;}
	.about-kinneco-container h1 {font-size: 32pt !important;}
	.about-kinneco-container img {width: 100%;}
	.about-responsive {width: 100% !important; float: none !important; margin-bottom: 20px !important;}
	.woman-responsive {width: 70% !important; margin: 0 auto !important; float: none !important; text-align: center !important;}
	.testimonials-container {width: 97%;}
	.testimonials-container p {font-size: 12pt !important;}
	.testimonials-container h1 {font-size: 32pt !important;}
	.testimonials-container img {width: 25%;}
	.testimonials-container ul {font-size: 12pt;}
	.second {float: none;}
	.error {width: 97%; margin: 0 auto; margin-top: 123px; margin-bottom: -3px;}
	.minion img {max-width: 97%;}
	.thumbnail {float: none; margin: 0 auto; margin-bottom: 30px; margin-top: 40px;}
	
	.intro-video video {width: 100%; height: auto;}
	
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.user-nav ul {top: 11px !important;}
}

</style>
