/*
 *   Fonts
 */

@font-face {
    font-family: 'Avenir Medium';
    src: url('fonts/Avenir%20Medium.eot');
    src: url('fonts/Avenir%20Medium.svg#avenirmedium') format('svg'),
         url('fonts/Avenir%20Mediumd41d.eot?#iefix') format('embedded-opentype'),
         url('fonts/Avenir%20Medium.woff') format('woff'),
         url('fonts/Avenir%20Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gill Sans';
    src: url('fonts/gillsans-webfont.eot');
    src: url('fonts/gillsans-webfont.svg#avenirmedium') format('svg'),
         url('fonts/gillsans-webfontd41d.eot?#iefix') format('embedded-opentype'),
         url('fonts/gillsans-webfont.woff') format('woff'),
         url('fonts/gillsans-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gill Sans Bold';
    src: url('fonts/gillsans-bold.html');
    src: url('fonts/gillsans-bold.svg#avenirmedium') format('svg'),
         url('fonts/gillsans-boldd41d.html?#iefix') format('embedded-opentype'),
         url('fonts/gillsans-bold.woff') format('woff'),
         url('fonts/gillsans-bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}



/*
 *   Reset
 */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
strong{font-weight:700;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}abbr,acronym{border:0;}

button::-moz-focus-inner {border:0; padding:0;} /* Remove button padding in Firefox */ 

/*
 *   Styles
 */
 
* {box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
 
html {min-height:100%; height:100%;}

body {min-height:100%; height:100%; font-family:'Avenir Medium', sans-serif; color:#322614;}

body,
input[type="text"],
input[type="password"],
select,
textarea {font-family:'Avenir Medium', Arial, Helvetica, sans-serif; font-weight:400; font-size:18px; line-height:26px;}

a:link,
a:visited {color:#163e72; text-decoration:underline;}
a:hover {text-decoration:none;}

a.button:link,
a.button:visited,
input[type="submit"],
input[type="button"],
button {padding:8px 15px; border:0; outline:none; border-radius:3px; background:#0b62a2; font-size:18px; text-decoration:none; font-family:'Avenir Medium', sans-serif; color:#fff; cursor:pointer;}

a.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {background:#176faf;}

a.button:link i,
a.button:visited i,
input[type="submit"] i,
input[type="button"] i,
button i {margin:0 5px 0 0;}

strong {font-weight:700;}

em {font-style:italic;}

small,
.small {font-size:80%; text-transform:uppercase; color:#ccc;}

h1 {margin:0 0 20px 0; font-size:36px; line-height:1.4em; font-weight:300;}
h2 {margin:0 0 1em 0; font-size:24px; line-height:1.4em; font-family:'Avenir Black', sans-serif;}

p {margin:0 0 1em 0; float:left; width:100%;}
p:last-child {margin-bottom:0;}

ul {list-style:disc; margin:0 0 1em 20px; float:left;}
ul li {width:100%;}

hr {margin:5px 0 10px 0; padding:0; background:transparent; color:transparent; height:0px; border:0; border-bottom:1px solid #d9d9d9;}

.outer {float:left; width:100%; height:100%;}

.panel {float:left; width:100%;}
.panel .inner {width:960px; margin:0 auto;}

.body {float:left; width:100%; min-height:100%; margin-bottom:-157px; padding-bottom:157px;}

.full-width {width:100%;}

.pageresponse {float:left; width:100%; margin:0 0 1em 0; padding:15px; background:#e01e3d; color:#fff; font-size:14px; line-height:1.4em;}
.pageresponse i {margin:0 8px 0 0;}

header {padding:30px 0; background:#fff;}
header .logo {float:left;}
header .ml {float:right; margin:15px 85px 0 0;}
header p {float:right; width:auto; margin:15px 0 0 0; font-size:22px; line-height:34px; color:#0a547b; text-align:right;}
header p a:link,
header p a:visited {font-weight:700; text-decoration:none;}

.subnav {padding:30px 0; background:#e3e3e3;}
.subnav h3 {float:left; margin:0 0 0 32px; color:#c71c32; font-family:Georgia, serif; font-style:italic;}
.subnav .links {float:right;}
.subnav a:link,
.subnav a:visited {margin:0 20px; padding:0 0 2px 0; border-bottom:1px solid #e3e3e3; font-size:19px; color:#0a547b; text-decoration:none;}
.subnav a:last-child {margin-right:0;}
.subnav a:hover,
.subnav a.active:link,
.subnav a.active:visited {border-bottom:2px solid #c71c32;}

nav {background:#0b62a2;}
nav.left {text-align:left; vertical-align:middle;}
nav.right {text-align:right; vertical-align:middle;}
nav a:link,
nav a:visited {float:left; color:#fff; text-decoration:none; font-size:20px; line-height:1em;}
nav a span {float:left; width:100%; padding:35px 64px; background:rgba(56,168,236,.7);}
nav .bottom a span {padding:35px 70px;}
nav a:first-child {margin-left:0;}
nav a:last-child {margin-right:0;}
nav a:hover,
nav a:hover span {background:rgba(199,28,50,.7); color:#fff;}
nav a.active:link span,
nav a.active:visited span {background:rgba(199,28,50,.7); color:#fff;}

nav a.remotes {background-image:url('images/nav-remotes.jpg'); background-position:center; background-size:cover;}
nav a.deadlocks {background-image:url('images/nav-deadlocks.jpg'); background-position:center; background-size:cover;}
nav a.automotive {background-image:url('images/nav-automotive.jpg'); background-position:center; background-size:cover;}
nav a.transponder-keys {background-image:url('images/nav-transponder-keys.jpg'); background-position:center; background-size:cover;}
nav a.access-control {background-image:url('images/nav-access-control.jpg'); background-position:center; background-size:cover;}
nav a.safes {background-image:url('images/nav-safes.jpg'); background-position:center; background-size:cover;}
nav a.mk-system {background-image:url('images/nav-mk-system.jpg'); background-position:center; background-size:cover;}
nav a.commercial {background-image:url('images/nav-commercial.jpg'); background-position:center; background-size:cover;}

footer {position:relative; z-index:2; padding:40px 0; background:#e01e3d; color:rgba(255,255,255,.8); font-size:14px; line-height:24px;}

footer .left {float:left; width:465px; margin:8px 0 0 0;}
footer .left p {font-size:14px; line-height:34px;}
footer .left a:link,
footer .left a:visited {color:rgba(255,255,255,.8);}

footer .middle {float:left; width:300px; margin:8px 0 0 40px; font-size:14px; line-height:34px;}
footer .middle a:link,
footer .middle a:visited {display:inline-block; margin:-3px 0 0 0; font-size:30px; color:#fff;}
footer .middle a:hover {text-decoration:none;}

footer .right {float:right; width:102px; text-align:center; color:#fff; font-size:12px;}
footer .right img {margin:5px 0 0 0;}

footer p {margin:0 0 1em 0;}
footer a:link,
footer a:visited {color:#fff; text-decoration:none;}
footer a:hover {text-decoration:underline;}
footer .pipe {margin:0 15px; color:rgba(255,255,255,.25); vertical-align:1px;}

.intro {padding:50px 0; background:#0b62a2; border-bottom:50px solid #0a547b; color:#fff; font-size:18px; line-height:29px;}
.intro h2 {font-size:51px; line-height:1em;}

.hero {height:460px; background:url('images/hero62e7.jpg?v33') center no-repeat; background-size:cover;}

.promo {height:345px;}
.promo .promo-bg {position:absolute; z-index:1; left:50%; right:0; margin-left:-70px; height:345px; background:url('images/promo-bg.png') left top no-repeat #e01e3d;}

.promo .left {position:relative; z-index:2; float:left; width:475px; padding:100px 0 100px 30px; text-align:left; color:#c71c32; background:url('images/promo-1.jpg') right center no-repeat;}
.promo .left em {display:block; font-style:normal; font-family:Georgia, serif; font-size:60px; line-height:1.2em; color:#0b62a2;}
.promo .left strong {font-family:'Avenir Black'; font-size:39px; line-height:1.2em; text-transform:uppercase;}
.promo .left p {margin:10px 0 0 0; font-size:18px; line-height:1.2em;}

.promo .right {position:relative; z-index:2; float:right; width:375px; padding:100px 0; color:#fff; text-align:center; text-transform:uppercase;}
.promo .right p {margin:0; font-size:48px; line-height:48px;}
.promo .right p {margin:0 0 1em 0; font-size:24px; line-height:1.2em;}
.promo .right strong {display:block; font-size:80px; line-height:100px;}
.promo .right strong {margin:10px 0 0 0; font-size:32px; line-height:1.2em;}
.promo .right small {display:block; font-size:18px; line-height:18px; color:#fff; letter-spacing:2px;}
.promo .right {width:380px; padding:30px 0; text-transform:none; color:rgba(255,255,255,.75);}
.promo .right p:last-child {margin-bottom:0;}
.promo .right strong {color:#fff;}

.news {background:#ebebeb;}
.news .bg {float:left; width:100%; height:100%; background:url('images/news-key.gif') left bottom no-repeat;}

.news .box {float:left; width:295px; padding:60px 0; color:#0a547b; font-size:18px; line-height:2em;}
.news .box h3 {margin:0 0 30px 0; font-size:46px; line-height:50px;}
.news .first {margin-left:330px;}
.news .second {margin-left:40px;}

.suppliers {height:510px; background:url('images/suppliers1b26.jpg?v2') center no-repeat;}

.main {position:relative; z-index:3; font-size:17px; line-height:22px; color:#0b62a2;}
.main .inner {min-height:750px;}
.main .left {float:right; width:325px; min-height:700px; margin:0 0 50px 0; padding:150px 32px 488px 32px; background:url('images/left-bg.png') bottom left no-repeat #e5e5e5; font-size:18px;}
.main .right {float:right; width:635px; padding:67px 0 100px 43px;}

.main .left ul {margin:0; list-style:none;}
.main .left a:visited,
.main .left a:link {float:left; clear:left; margin:0 0 32px 0; text-decoration:none; color:#0b62a2;}
.main .left a:hover {text-decoration:underline;}
.main .left li.on a:visited,
.main .left li.on a:link {color:#a5c5dd;}

.main h1 {margin:0 0 35px 0; font-size:45px; line-height:1em;}

table.form {width:100%;}
table.form tr th {padding:15px; background:#f7f7f7;}
table.form tr td {padding:15px; background:#f7f7f7;}
table.form input[type="text"],
table.form select,
table.form textarea {padding:10px; background:#fff; border:1px solid #999; outline:none;}

input[type="text"],
input[type="password"],
select,
textarea {font-size:17px; line-height:1.2em;}

.show-mobile {display:none;}
.hide-mobile {}

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

  .panel .inner {width:100%;}
  
  .body {overflow-x:hidden; min-height:1px; margin-bottom:0; padding-bottom:0;}
  
  header {padding:30px 0;}
  header .inner {padding:0 30px;}
  
  .subnav .inner {padding:0 30px;}
  
  nav {float:none; display:inline-block; text-align:center;}
  nav .inner {padding:0;}
  
  nav .top,
  nav .bottom {float:none; display:inline-block; width:100%; text-align:center;}
  
  nav a:link,
  nav a:visited {float:none; display:inline-block;}
  
  nav a:link,
  nav a:visited {width:50%;}
  
  nav ul {float:none; width:100%; text-align:left;}
  nav ul.more,
  nav ul ul {padding:0;}
  
  nav ul li {float:none; display:inline-block;}
  
  .intro .inner {padding:0 30px;}
  
  .suppliers {height:0px; padding:0 30px; padding-bottom:56%; background:none;}
  .suppliers .inner {height:0px; padding-bottom:63%; background:url('images/suppliers.jpg') center no-repeat; background-size:contain;}
      
  .main .inner {padding:0 30px; min-height:1px;}
    
  .main .left {display:none; float:right; width:100%; margin:40px 0 0 0; padding:30px; min-height:1px; background-image:none;}
  .main .left li:last-child a {margin-bottom:0;}
  .main .right {float:right; width:100%; min-height:1px; margin:0; padding:30px 0;}
  .main .right img {max-width:100%; height:auto !important;}

  ul.subnav {margin:0 0 20px 0; min-height:1px;}
  
  footer {padding:0; text-align:center;}
  
  footer .left {margin:30px; text-align:left;}
  footer .middle {margin:30px; text-align:left;}
  footer .right {margin:30px; display:inline-block; float:none; clear:left;}
  
  .news .box {width:50%; margin:0; padding:60px 30px;}
  .news .first {margin:0;}
  
}

@media all and (max-width:1000px){
  
  header .ml {margin-right:35px;}
  
  .promo-bg {display:none;}
  .promo {height:auto;}
  .promo .left {width:100%; padding:30px; text-align:center;}
  .promo .right {width:100%; padding:30px; text-align:center; background:#e01e3d;}
  
}

@media all and (max-width:800px){

  header .ml {display:none;}
  
  .subnav h3 {display:none;}
  .subnav .links {float:none; text-align:center;}
  
  nav a:link,
  nav a:visited {display:inline-block; float:none;}

}

@media all and (max-width:768px){

  .show-mobile {display:inline-block;}
  .hide-mobile {display:none;}
  
  .hero {display:none;}
  
  header {padding:30px 0; background:none;}
  header .logo {float:none; width:auto; margin:0; display:inline-block;}
  header img {margin:0;}
  
  .search {display:none;}
  
  nav ul.show-mobile {display:inline-block;}
  
  .main {padding:30px 0;}
    
  footer {height:auto; min-height:81px;}
  footer .left,
  footer .middle,
  footer .right {display:inline-block; float:none; width:100%; text-align:center;}
  footer .left {width:auto; margin:30px 0 0 0; padding:0;}
  footer .left p {line-height:1.8em;}
  footer .right {margin-top:20px; padding:0; width:102px;}
  footer .middle {margin:20px 0 0 0; padding:0;}
  
  .credit .inner {padding:0 30px; text-align:center;}
  
  .news .box {width:100%; padding:30px;}

}

@media all and (max-width:640px){

  header {text-align:center;}
  header p {width:100%; margin:1em 0 0 0; text-align:center;}
  
  nav a:link,
  nav a:visited {width:100%;}
  
  .subnav .inner {padding:0;}
  
  .promo .left {background:none;}

}

@media all and (max-width:560px){
  
  header .logo {display:inline-block; text-align:center; max-width:100%; height:auto !important;}
  header .phone {float:none; display:inline-block; width:100%; margin:20px 0 0 0; text-align:center;}
  
  header h1 {font-size:36px;}

}

@media all and (max-width:420px){
  
  /*
  .promo .right p {font-size:40px; line-height:1em;}
  .promo .right strong {font-size:70px; line-height:90px;}
  */
  .promo .right small {font-size:15px; line-height:15px;}

}