.swatches,
.swatch {
  display: block;
}

.swatches:after,
.swatch:after {
  clear: both;
  content: "";
  display: block;
  visibility: hidden;
  height: 0;
}

.swatches {
  /*margin: 17px 0 80px;*/
  /*margin-top: 20px;*/
}

.selector-wrapper,
#productSelect {
  display: none;
}

.swatch {
  /*float: left;
  margin-right: 40px;*/
}

.swatch:nth-last-child(2) {
  margin-right: 0;
}

.swatch .header {
  font-family: "Perpetua Bold";
  font-size: 18px;
  color: #47290f;
  text-transform: uppercase;
}

.swatch h3 {
  font-family: "Perpetua Bold";
  font-size: 18px;
  color: #47290f;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(161,104,51,.5);
}

.swatch input {
  /*display: none;*/
  position: absolute;
  visibility: hidden;
}

.swatch .swatch-element {
  float: left;
  margin: 5px 8px 0 0;
  position: relative;
}

.swatch .color label {
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 1px solid;
  cursor: pointer;
  display: block;
  height: 34px;
  padding: 4px 0 0 4px;
  width: 34px;
}

.swatch .color label span {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  display: block;
  height: 24px;
  position: relative;
  width: 24px;
}

.swatch .color label span:after {
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  /*background: #f00 url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEycHgiIGhlaWdodD0iOXB4IiB2aWV3Qm94PSIwIDAgMTIgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTIzMS4wMDAwMDAsIC0xMzAyLjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMy4wMDAwMDAsIDEyNDYuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTIzNS45MzgzNyw1OC40NTA1ODYxIEwxMjM0LjUyMTE2LDU5LjM5NTUzMDcgTDEyMzcuNTQ4NDgsNjMuOTM2NzE1OCBMMTI0NS45MjIyNSw1OC4zNTM5MTk4IEwxMjQ0Ljk3NzczLDU2LjkzNjcxNTggTDEyMzguMDIxMTYsNjEuNTc0NTY3MSBMMTIzNS45MzgzNyw1OC40NTA1ODYxIEwxMjM1LjkzODM3LDU4LjQ1MDU4NjEgWiIgaWQ9ImZhamZrYSIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTI0MC4yMjE3MDYsIDYwLjQzNjcxNikgcm90YXRlKC0xMC4wMDAwMDApIHRyYW5zbGF0ZSgtMTI0MC4yMjE3MDYsIC02MC40MzY3MTYpIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") no-repeat center center;*/
  background: transparent url("../images/palomita.svg") no-repeat center center;
  bottom: 0;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/*palomita blanco*/

.swatch .color-w label {
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 1px solid;
  cursor: pointer;
  display: block;
  height: 34px;
  padding: 4px 0 0 4px;
  width: 34px;
}

.swatch .color-w label span {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  display: block;
  height: 24px;
  position: relative;
  width: 24px;
}

.swatch .color-w label span:after {
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  /*background: #f00 url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEycHgiIGhlaWdodD0iOXB4IiB2aWV3Qm94PSIwIDAgMTIgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTIzMS4wMDAwMDAsIC0xMzAyLjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMy4wMDAwMDAsIDEyNDYuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTIzNS45MzgzNyw1OC40NTA1ODYxIEwxMjM0LjUyMTE2LDU5LjM5NTUzMDcgTDEyMzcuNTQ4NDgsNjMuOTM2NzE1OCBMMTI0NS45MjIyNSw1OC4zNTM5MTk4IEwxMjQ0Ljk3NzczLDU2LjkzNjcxNTggTDEyMzguMDIxMTYsNjEuNTc0NTY3MSBMMTIzNS45MzgzNyw1OC40NTA1ODYxIEwxMjM1LjkzODM3LDU4LjQ1MDU4NjEgWiIgaWQ9ImZhamZrYSIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTI0MC4yMjE3MDYsIDYwLjQzNjcxNikgcm90YXRlKC0xMC4wMDAwMDApIHRyYW5zbGF0ZSgtMTI0MC4yMjE3MDYsIC02MC40MzY3MTYpIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") no-repeat center center;*/
  background: transparent url("../images/palomita-blanco.svg") no-repeat center center;
  bottom: 0;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.swatch .plain label {
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  font-size: 14px;
  border: 1px solid #47290f;
  color: #47290f;
  cursor: pointer;
  display: block;
  height: 34px;
  padding-top: 6px;
  text-align: center;
  width: 34px;
}

.swatch .color input:checked + label span:after {
  opacity: 1;
}

.swatch .color-w input:checked + label span:after {
  opacity: 1;
}

.swatch input:not(:checked) + label {
  border-color: rgba(161,104,51,.5) !important;
}

.swatch input:not(:checked) + label:hover {
  border-color: #47290f !important;
}

.swatch .plain input:not(:checked) + label {
  color: #47290f !important;
}

.swatch .blue input:checked + label {
  /*border-color: #086fcf !important;*/
}

.swatch .yellow input:checked + label {
  border-color: #f5c81f !important;
}

.swatch .red input:checked + label {
  border-color: #d9332e !important;
}

.swatch .blue label span {
  /*background-color: #086fcf !important;*/
}

.swatch .yellow label span {
  background-color: #f5c81f !important;
}

.swatch .red label span {
  background-color: #d9332e !important;
}

.crossed-out {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.swatch .swatch-element .crossed-out {
  display: none;
}

.swatch .swatch-element.soldout .crossed-out {
  display: block;
}

.swatch .swatch-element.soldout label {
  filter: alpha(opacity=60);
  -khtml-opacity: 0.6;
  -moz-opacity: 0.6;
  opacity: 0.6;
}

.swatch .tooltip {
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  text-align: center;
  background-color: rgba(70, 41, 15, 0.93);
  font-family: "Perpetua";
  font-size: 15px;
  color: #fff;
  bottom: 100%;
  padding: 6px;
  display: block;
  position: absolute;
  width: 100px;
  left: -23px;
  margin-bottom: 15px;
  filter: alpha(opacity=0);
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  -ms-transform: translateY(10px);
  -o-transform: translateY(10px);
  transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
  -moz-transition: all .25s ease-out;
  -ms-transition: all .25s ease-out;
  -o-transition: all .25s ease-out;
  transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(70, 41, 15, 0.28);
  -moz-box-shadow: 2px 2px 6px rgba(70, 41, 15, 0.28);
  -ms-box-shadow: 2px 2px 6px rgba(70, 41, 15, 0.28);
  -o-box-shadow: 2px 2px 6px rgba(70, 41, 15, 0.28);
  box-shadow: 2px 2px 6px rgba(70, 41, 15, 0.28);
  z-index: 10000;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.swatch .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}

.swatch .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid rgba(70, 41, 15, 0.93) 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}

.swatch .swatch-element:hover .tooltip {
  filter: alpha(opacity=100);
  -khtml-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
}

.swatch.error {
  background-color: #E8D2D2 !important;
  color: #333 !important;
  padding: 1em;
  border-radius: 5px;
}

.swatch.error p {
  margin: 0.7em 0;
}

.swatch.error p:first-child {
  margin-top: 0;
}

.swatch.error p:last-child {
  margin-bottom: 0;
}

.swatch.error code {
  font-family: monospace;
}

form.cmxform label.error, label.error {
  display: none;
  color: red;
  font-family: "Perpetua Bold";
  font-size: 14px;
  margin-left: -15px;
  width: 100%;
}