html, body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #333335;
  margin: 0% 0% 0% 0%;
  padding: 0% 0% 0% 0%;
}

.canvas-header{
  float: right;
  display: inline-block;
  width: 50%;
}

.canvas-menu{
  float: right;
  display: inline-block;
  width: 50%;
  }


.elem-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 48%;
  padding: 0% 1% 0% 1%;
}

.under-area {
  display: inline-block;
  float: left;
  margin: 0% 0% 0% 0%;
  width: 50%;
  padding-top: 48.1%;
  background: rgb(100,100,100);
  background: linear-gradient(0deg, rgba(100,100,100,1) 0%, rgba(150,150,150,1) 30%, rgba(215,215,215,1) 100%);
  
}

.canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 48%;
  height: auto;
  padding: 0% 1% 0% 1%;
}

.product {
  width: 100%;
}

.label {
  text-align: center;
  color: #3c3c3b;
  font-size: 0.7vw;
}

.sku {
  text-align: center;
  color: #3c3c3b;
  font-size: 0.6vw;
}


.block {
  text-align: center;
  display: inline-block;
  padding: 1% 1% 1% 1%;
  width: 11%;
  }

.sample {
  width: 100%;
}


.panel {
  float: left;
  width: 100%;
  background-color: #e3e3e3;
  text-align: center;
  display: none;
}

.panel.show {
   display: block;
}

.logo-menu {
  display: inline-block;
  width: 90%;
  height: 15vw;
  padding: 3% 5% 3% 5%;
  text-align: center;
  color: white;
  font-size: 1.5vw;
  background-color: #97bf0d;
}



.logo-header{width:60%;
}

.legal {
  float: right;
  width: 100%;
  -display: inline-block;
  padding: 1% 0% 1% 0%;
  text-align: center;
  color: #3c3c3b;
  font-size: 0.8vw;
  background-color: #97bf0d;
}
  
.main-menu {
  width: 96%;
  height: 26.3vw;
  padding: 3% 2% 2% 2%;
  text-align: center;
  }

.accordion, .accordion-close{
 border-radius: 50%;
 float: top;
 background-color: #97bf0d;
 color: #3c3c3b;
 border: none;
 width: 8.4%;
 height: auto;
 margin: 2% 1% 4% 1%;
 transition: 0.4s;
 text-align: center;
font-weight: 900;
font-size: 0.6vw;
}


.accordion:hover {
  background-color: red;
}

.active {
    background-color: red;
}

.sample:hover {
  webkit-transform: scale(1.3);
  webkit-transition:all 0.3s easy-in;
  moz-transform: scale(1.3);
  moz-transition:all 0.3s ease-in;
  ms-transform: scale(1.3);
  ms-transition:all 0.3s ease-in;
  o-transform: scale(1.3);
  o-transition:all 0.3s ease-in;
  transform: scale(1.3);
  transition:all 0.3s ease-in;
}

  
.button-cont {
vertical-align: top;
display: inline-block;
text-align: center;
font-weight: 500;
color:  #ADFF2F;
font-size: 0.6vw;
width: 8%;
margin: 0% 1% 0% 1%;
  
}

.select-icons {
  width: 100%;
  }


hr {
  border-top: 5px solid;
  border-color: #3c3c3b;
}

.block2 {
  text-align: center;
  display: inline-block;
  padding: 1% 1% 1% 1%;
  width: 12%;
  }
 

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 768px) {
/* Styles */

  .canvas-header{
  float: right;
  display: inline-block;
  width: 100%;
}

.canvas-menu{
  float: right;
  display: inline-block;
  width: 100%;
  }
  
  .main-menu {
  width: 100%;
  height: auto;
  }
  
  .panel {margin: 0% 0% 2% 0%;}
  
  
  .under-area {
  display: inline-block;
  float: left;
  margin: 0% 0% 0% 0%;
  width: 100%;
  padding-top: 60%;
}
  
  .logo-menu {
  width: 100%;
  padding: 3% 5% 5% 5%;
  text-align: left;
  color: #3c3c3b;
  font-size: 3.8vw;
  font-weight: 900;
}
  
  .logo-header{width: 40%;
}
  
  .accordion, .accordion-close{
 border-radius: 50%;
 float: top;
 -width: 7%;
 -height: auto;
font-size: 1vw;
}
  
  .block {
  width: 10%;
  }
  
  .label {
  font-size: 1.5vw;
}

.sku {
  font-size: 1vw;
}
  
  .legal {
  font-size: 1vw;
}
  
  .elem-canvas {
  top: 24vw;
  left: 17%;
  width: 60%;
  padding: 0% 0% 0% 0%;
}

  .canvas {
  top: 24vw;
  width: 60%;
  left: 17%;
  padding: 0% 0% 0% 0%;
}
 }