/* Basic Styling */
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  font-family: 'Roboto', sans-serif;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px;
  display: flex;
}

/* Columns */
.left-column {
  
}

.right-column {
 
  /*margin-top: 60px;*/
}

.primo-column, .primo2-column,.secondo-column,.secondo2-column,.terzo-column,.terzo2-column{
  position: relative;
}

/* Left Column */
.base-column img,.base2-column img,.primo-column img,.primo2-column img,.secondo-column img,.secondo2-column img,.terzo-column img,.terzo2-column img  {
  /*width: 50px;
  position: absolute;
  left: 25%;
  top: 0;*/
  opacity: 0;
  transition: all 0.3s ease;
}

.base-column img.active,.primo-column img.active, .secondo-column img.active,.terzo-column img.active,.base2-column img.active,.primo2-column img.active, .secondo2-column img.active,.terzo2-column img.active  {
  opacity: 1;
}


/* Right Column */

/* Product Description */
.product-description {
  border-bottom: 1px solid #E1E8EE;
  /*margin-bottom: 20px;*/
}
.product-description span {
  font-size: 12px;
  color: #358ED7;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
}
.product-description h1 {
  font-weight: 300;
  font-size: 52px;
  color: #43484D;
  letter-spacing: -2px;
  margin:10px 0px 10px 0px;
}
.product-description p {
  font-size: 16px;
  font-weight: 300;
  color: #86939E;
  line-height: 24px;
}

/* Product Configuration */
.product-color span,
.cable-config span {
  font-size: 14px;
  font-weight: 400;
  color: #86939E;
  margin-bottom: 20px;
  display: inline-block;
}





.cable-config {
  border-bottom: 1px solid #E1E8EE;
  margin-bottom: 20px;
}

.cable-config a {
  color: #358ED7;
  text-decoration: none;
  font-size: 12px;
  position: relative;
  margin: 10px 0;
  display: inline-block;
}
.cable-config a:before {
  content: "?";
  height: 15px;
  width: 15px;
  border-radius: 50%;
  border: 2px solid rgba(53, 142, 215, 0.5);
  display: inline-block;
  text-align: center;
  line-height: 16px;
  opacity: 0.5;
  margin-right: 5px;
}

/* Product Price */
.product-price {
  align-items: center;
}

.product-price div {
  font-size: 15px;
  font-weight: 300;
  color: #43474D;
  /*margin-right: 20px;*/
}

.cart-btn {
  display: inline-block;
  background-color: #7DC855;
  border-radius: 6px;
  font-size: 16px;
  color: #FFFFFF;
  text-decoration: none;
  padding: 12px 30px;
  transition: all .5s;
}
.cart-btn:hover {
  background-color: #64af3d;
}

.config-btn {
  display: inline-block;
  background-color: #7DC855;
  border-radius: 6px;
  font-size: 16px;
  color: #FFFFFF;
  text-decoration: none;
  padding: 6px 30px;
  transition: all .5s;
}
.config-btn:hover {
  background-color: #64af3d;
}
/* Responsive */
@media (max-width: 940px) {
  .product-description h1 {
    font-weight: 300;
    font-size: 30px;
  }
  .container {
    flex-direction: column;
    /*margin-top: 60px;*/
  }

  .left-column,
  .right-column {
    /*width: 100%;*/
  }

  .left-column img {
    /*width: 300px;
    right: 0;
    top: -65px;
    left: initial;*/
  }
}
#rowedit{
  border-left:1px solid #f1f1f1
}
@media (max-width: 535px) {
  .left-column img {
    /*width: 220px;
    top: -85px;*/
  }
  
}

@media (max-width: 535px) {
  h5 {
    font-size: 1.2rem  !important;
  }
  #rowedit{
    border-left:none;
  }
  
  #circoredx,#circoresx{
    padding:0 !important;
  }
  .cerchiopiccolosx,.cerchiopiccolodx{
    width: 58px !important;
   /* top:15px !important;*/
    left: 50px !important;
  }
  .cerchiomediosx,.cerchiomediodx{
    width: 103px !important;
   /* top:5px !important;*/
    left: 27px !important;
  }
  .cerchiograndesx,.cerchiograndedx{
    width: 147px !important;
   /*top:10px !important;*/
    left: 5px !important;
  }
  #pendentecirclesx, #pendentecircledx{
    height: 155px !important;
    width:auto !important;
  }
}
@media (max-width: 330px) {
  h5 {
    font-size: 1.2rem !important;
  }
  #rowedit{
    border-left:none;
  }
  
  #circoredx,#circoresx{
    padding:0 !important;
  }
  .cerchiopiccolosx,.cerchiopiccolodx{
    width: 58px !important;
   /* top:15px !important;*/
    left: 40px !important;
  }
  .cerchiomediosx,.cerchiomediodx{
    width: 103px !important;
   /* top:5px !important;*/
    left: 15px !important;
  }
  .cerchiograndesx,.cerchiograndedx{
    width: 147px !important;
   /*top:10px !important;*/
    left: 0px !important;
  }
  #pendentecirclesx, #pendentecircledx{
    height: 155px !important;
    width:auto !important;
  }
}

.buttondivugualiactive{
  border:2px solid #444; padding:10px; text-align:center; color:#444; cursor:pointer;font-size: 12px;
}
.buttondivugualiinactive{
  border:2px solid #ccc; padding:10px; text-align:center; color:#ccc; cursor:pointer;font-size: 12px;
}