* {
  box-sizing: border-box;
  padding:0px;
}
body {
  background: #e4e4e4;
  margin: 0;
  padding: 0;
}
button {
  background-color: transparent;
  margin: 0;
}
.title {
  font-size: 1.1em;
  margin: 0;
  color: inherit;
  text-transform: uppercase;
  font-weight:normal;
}
h1 {
  font-size: 1.4em;
  font-weight:normal;
  margin: 0 auto;
  color: white;
  background-color:rgba(0,0,0,0.7);
  text-transform: uppercase;
  font-weight: bold;
  width:fit-content;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  height:auto;
  padding:20px;
}
h2 {
  font-size: 1.35em;
  margin: 0;
  padding: 15px 0;
  color: inherit;
  text-transform: uppercase;
}
h3 {
  font-size: 1.9em;
  margin: 20px 0 -5px 0;
  padding: 10px;
}
h4 {
  font-size: 2em;
  color: inherit;
  margin: 0 0 20px;
}
h5 {
  font-size: 1em;
  color: #FF6600;
  margin: 0 0 20px;
}
h6 {
  font-size: 1.3em;
  color: #FF6600;
  margin: 0 0 20px;
}
p {
  font-size: 1em;
  margin: 0;
  color: #444;
  line-height: 1.6em;
}
h1,h2,h3,h4,h5,h6,p,a, label {
  font-family:Helvetica;
}
a {
  text-decoration: none;
}
.thumbup {
  color: green;
  font-size: 1.1em;
}
.color-hight {
  color: #FF6600;
}
.body-section-color0 {
}
.body-section-color1 {
}
.body-section-color2 {
  background: #222;
}

.top-bar-wrap {
  width: 100%;
  height:auto;
  position: fixed;
  background-color: rgba(200,52,0,0.9);
  top:0;
  z-index:100;
  height:auto;
}
.top-bar {
  width: 100%;
  height:auto;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
}
.top-bar-title {
  text-align: center;
  width: 100%;
  margin: auto;
  color: white;
}
.body-banner-wrap {
  width: 100%;
  height:auto;
  background-color: #0a0a0c;
  margin: 45px auto 0;
}
.body-banner {
  background-image: url("images/banner-top2.jpeg");
  background-color: black;
  background-size:cover;
  max-width: 1200px;
  height:auto;
  margin: 35px auto 0;
  padding: 20px;
  text-align:center;
  width: 100%;
}
.body-section {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}
.body-section-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0px auto 0;
  padding: 20px;
  text-align:center;
}

.body-intro {
  margin:50px auto -30px;
  /* color: #111; */
  text-align: center;
  font-size:1.1em;
}

.thumb-grid {
  display: grid;
  grid-template-columns: 100%;
  grid-gap: 0px;
  /* margin-bottom:20px; */
}
.thumb-separator {
  margin-bottom:50px;
}
.thumb-wrap {
  text-align: center;
  position:relative;
  padding:20px 10px;
}

.thumb-img-title {
  color: #fff;
  background-color: rgba(0,0,0,0.55);
  text-align: center;
  width:100%;
  position:absolute;
  top:0px;
  padding: 10px;
}
.thumb-intro{
  text-align: center;
  width:100%;
  padding: 20px;
  background-color: #fefefe;
  font-size: 1.1em;
}
.thumb-img {
  width: 100%;
  height: auto;
  position: relative;
}
.thumb-img-content {
  width: 100%;
  height: auto;
  margin-bottom: -4px;
  opacity:1;
}

input#menu-input, input#more-laser, input#more-dotpeen-benchtop, input#more-mobile,
input#more-dotpeen-integrable, input#more-scribing-integrable {
  display: none;
}
#menu-input:checked ~ .menu-content,
#more-laser:checked ~ .more-content,
#more-dotpeen-benchtop:checked ~ .more-content,
#more-mobile:checked ~ .more-content,
#more-dotpeen-integrable:checked ~ .more-content,
#more-scribing-integrable:checked ~ .more-content {
  display: block;
}
#more-laser:checked ~ label:before,
#more-dotpeen-benchtop:checked ~ label:before,
#more-mobile:checked ~ label:before,
#more-dotpeen-integrable:checked ~ label:before,
#more-scribing-integrable:checked ~ label:before {
  content: '\0025b2';
  color: #ccc;
}

.top-menu-btn {
}
.top-menu-lg {
  margin:auto 10px auto 0;
  display:flex;
  background-color:rgba(0,0,0,0.1);
  border-radius:5px;
}
.a-lg {
  padding:5px;

}
.p-lg {
  color:#ddd;
}
.label-menu {
  background-color: #FF6600;
  color: white;
  display: block;
  cursor: pointer;
  height: 100%;
  padding:5px 10px;
  font-size: 1.5em;
}
.menu-content {
  display: none;
  overflow: hidden;
  position: absolute;
  background-color:transparent;
  width:100%;
  margin-top:0px;
}
.top-menu-btn label:before {
  content: '\002630';
}
.top-menu-links {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-gap: 0px;
}
.p-menu {
  margin: auto;
  color: white;
}
.top-menu-contact {
  display: inline-flex;
  width:100%;
}
.a-menu {
  display: flex;
  text-align: center;
  width:100%;
  height: auto;
  font-size:1.1em;
  /* color: white; */
  padding: 20px;
  background: rgba(255,102,0,0.9);
  border: solid 1px rgba(0,0,0,0.2);
}
.a-menu:hover {
  background-color: rgba(50,50,50,1);
}
.a-menu-contact {
  display: block;
  width:50%;
  height: auto;
  font-size:1.1em;
  padding: 20px;
  color:white;
  border: solid 1px rgba(0,0,0,0.2);
  text-align:center;
  background: rgba(0,178,71,0.9);
}
.a-menu-contact:hover {
  background-color: rgba(10,10,10,1);
}
.icon-contact-img {
  width: auto;
  height: auto;
  margin:10px auto -10px;
  display:block;
  max-height:50px;
}
.a-phone {
  background: rgba(0,153,255,0.9);
}
.a-email {
  background: rgba(0,178,71,0.9);
}


.figures-grid {
  display: grid;
  grid-template-columns: 100%;
  grid-gap: 0px;
}
.figures-grid-content {
  color: white;
  text-align: center;
  padding: 30px;
  background-color:#FF6600;
  margin: 50px 20px 30px;
}
.icon-figures {
  margin-bottom:20px;
}
.p-figures {
  font-size: 1.35em;
  color: white;
}
.about-us-grid {
  padding:20px;
  font-size: 1.1em;
  margin-top:10px;
}
.certification {
  padding:10px 25px;
  text-align: center;
  background-color:rgba(0,0,0,0.9);
  height:fit-content;
  margin: 40px auto;
  max-width:380px;
}
.certification-img {
  width: auto;
  max-height: 100px;
  margin-bottom: -4px;
}
.certification-a {
  text-decoration: underline;
  display: block;
  color: rgba(255,102,0,0.85);
  padding: 1px;
  border: none;
  margin:0 auto;
  font-size: 1.1em;
}



.bottom-bar-wrap {
  width: 100%;
  background-color: #222;
}
.bottom-bar {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  padding: 20px;
}
.bottom-grid {
  display: grid;
  grid-template-columns: 100%;
  grid-gap: 0px;
}
.contact-details {
  padding:20px;
  text-align:center;
}
.p-contact {
  color: #a1a6a6;
  font-size: 1.1em;
}
.contact-social {
  padding:20px;
  text-align:center;
}
.social-img {
  width: auto;
  height: 30px;
  margin:15px 15px 0 15px;
}



@media only screen and (min-width: 301px) {
  .top-menu-section {
    grid-template-columns: 33.4% 33.3% 33.3%;
  }
  /* .a-menu, .a-menu-contact {
    padding: 12px;
  } */
}

@media only screen and (min-width: 801px) {
  .menu-content {
    width: 300px;
  }
  .thumb-grid {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-gap: 0px;
  }
  .thumb-wrap {
    padding: 20px;
  }
  .figures-grid {
    display: grid;
    grid-template-columns: 33.4% 33.3% 33.3%;
    grid-gap: 0px;
  }
  .figures-grid-content {
    /* margin: 90px 30px; */
    margin: 50px 30px 30px;
  }
  .bottom-grid {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-gap: 25px;
    margin: 0 50px 20px;
  }
  /* .contact-details {
    padding:20px;
    text-align:left;
  } */
}