* {  margin: 0;  padding: 0; }
html,
body {  width: 100%;  max-width: 1600px; min-height: 100%;  font: 16px 'Open Sans', sans-serif; }
.clearfix { clear: both;display: table;content: " ";}
a { text-decoration:none;}
.wrapper {  min-width: 1043px;  min-height: 100%;  position: relative; }
.amazon {    border: 1px dotted black;
    padding: 10px;
}
.teaser { width:100%;}
.headerad { width:100%; position: relative; text-align:center; }
.logo {
  background: url("obdii250.jpg") no-repeat 50% 0;
  height: 250px;
  position: relative;
  width:250px;
  float:left;
  margin-right: 36px;
  z-index:2;
}

.description {
  color:#FFFFFF;
  z-index:1;
  height:250px;
  width:100%;
  position: relative;
  background: url("header.jpg") no-repeat 50% 0;
}
.description a {
 color:#FFFFFF;
}
.description .lang {
  float:right;
  margin-right:36px;
  margin-bottom:16px;
}

.description .lang a {
  color:#FFFFFF;
}
.description h2 {
  color: #EEEEEE;
  font: bold 34px 'Open Sans', sans-serif;
  text-transform: uppercase;
  margin-bottom:20px;
  padding-top:16px;
}
.description h1 {
  color: #EEEEEE;
  font: bold 34px 'Open Sans', sans-serif;
  text-transform: uppercase;
  margin-bottom:20px;
  padding-top:16px;
}


.description .share {
  position: absolute;
  right: 50px; bottom: 5px;
}
.wrapper .supported {  width:250px;  margin:10px;  position:absolute; }
.wrapper .supported ul {  list-style: none;}
.wrapper .supported ul li {  margin-bottom: 5px;  color: #2f2f2f;  font: 16px/24px; 'Open Sans', sans-serif;
  background: url("marker.png") no-repeat 0 0px;  padding-left: 34px;
}
.wrapper .supported  ul li:last-child {  margin-bottom: 0;}
.wrapper .supported  ul li:first-child {  margin-top: 10px;}
.wrapper .supported ul li a {  color:#2f2f2f; }

.wrapper .advert {  float:right;  width:320px;  margin:10px; }
.wrapper .advert .app {  text-align:center;  margin-bottom:15px; }
.wrapper .advert .app .alert {  color: #FF3030;  font-size: 18px;  font-weight: 700; }
.wrapper .advert .app img { margin-top: 10px; }

.wrapper .maintext {  overflow:hidden;  padding:10px; left: 270px;    right: 340px;   position: absolute;}
.wrapper .maintext .head {  font:bold 24px/30px 'Open Sans',sans-serif;  color: #cc9966;  margin-bottom:15px;  text-align:center; }
.wrapper .maintext .codesform {  width: 396px;  left:50%;  position:relative;  margin-left:-198px; }
.wrapper .maintext .codesform .digit{  float:left; margin-right:5px;  margin-top:15px; }
.wrapper .maintext .codesform .digit .topdigit {
  width: 70px; height:30px;
  border: 2px solid #333366;
  text-align:center;
  font:bold 24px/30px 'Open Sans',sans-serif;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: 0;
  cursor:pointer;
}

.wrapper .maintext .codesform .digit .bottomdigit {
  width: 70px; height:30px;
  border: 2px solid #333366;
  text-align:center;
  font:bold 24px/30px 'Open Sans',sans-serif;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: 0;
  cursor:pointer;
}

.wrapper .maintext .codesform .digit .middledigit {
  width:70px; height:80px;
  border: 2px solid #333366;
  text-align:center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: 0;
  font:bold 54px/80px 'Open Sans',sans-serif;
}

.wrapper .maintext .codesform input {
  margin-top: 15px;
  width: 390px; height:30px;
  border:2px solid #333366;
  cursor:pointer;

}

.wrapper .maintext .adsenseadapt {
 margin-top:32px;
 max-height:300px;
}
.wrapper .maintext .definition {
  margin-top:32px;
}

.wrapper .maintext .definition .error {
 font:bold 24px/30px 'Open Sans',sans-serif;
 color: red;
}

.wrapper .maintext .definition .defheader h1 {
  font:bold 24px/30px 'Open Sans',sans-serif;
  color: #cc9966;
  margin-bottom:15px;
}

.wrapper .maintext .definition .model h2 {
 margin-bottom:15px;
 font:bold 20px/22px 'Open Sans',sans-serif;
 color: #333366;
}

.wrapper .maintext .definition .def {
 margin-bottom:30px;
}

.wrapper .maintext .definition .code {
  float:left;
  margin:5px;
}

.wrapper .maintext .definition .code a {
  color:#2f2f2f;
}

.addcode label {
    width: 200px;
    display: block;
    float: left;
    margin-top: 10px;
}

.addcode textarea, .addcode input, .addcode select {
    margin-top: 10px;
    min-width: 200px;
    width: 100%;
    max-width: 500px;
}

.addcode textarea {
   height:100px;
}

.notfound label {
    width: 200px;
    display: block;
    float: left;
    margin-top: 10px;
}

.notfound textarea, .notfound input, .notfound select {
    margin-top: 10px;
    width: 200px;
}


@media only screen and ( max-width: 414px) { 
 .wrapper {
  min-width: 0;
  min-height: 100%;
  position: relative;
}

 .description { height: 90px; }
 .description p { display:none; }
 .logo { height: 64px; width: 64px;   background: url("obdii64.jpg") no-repeat 50% 0;  margin-right: 10px;}
 .wrapper .supported { display:none; }
 .description h2 {   font: bold 14px 'Open Sans', sans-serif;   margin-bottom:20px; padding-top:17px; }
 .description h1 {   font: bold 14px 'Open Sans', sans-serif; margin-bottom:20px; padding-top:17px; }
 .description .lang {     float: right;    margin-right: 5px;    margin-bottom: 0; font-size: 12px;}
 .wrapper .maintext { position:relative; left:0; right:0 }
 .wrapper .maintext .adsenseadapt { margin:0; }
 .wrapper .maintext .codesform { width: 100%; max-width: 396px; position: relative; margin-left: auto; margin-right: auto; left:0;}
.wrapper .maintext .codesform .digit { float: left; width: 20%; margin-right: 0px; margin-top: 0px; }
.wrapper .maintext .codesform .digit .topdigit {  width: 90%; }
.wrapper .maintext .codesform .digit .middledigit {  width: 90%; }
.wrapper .maintext .codesform .digit .bottomdigit {  width: 90%; }
.wrapper .maintext .codesform input {   width: 99%; }
.wrapper .nativeadapt:not(:empty) { display: none; width:100%; }
.wrapper .advert { width: 100%; display: flex;    flex-flow: column; float:none; margin:0}
.wrapper .advert .app {order: 2;}

}