/*

GLOBAL

*/

.social-networks ul {
  
  text-align : right;
  
}

/*

COLLECTION.LIQUID

*/

.template-collection .main-content {
  
  text-align : center;
  
}


/* 
   Swatches Styles
*/

{% assign width = '50px' %}
{% assign height = '35px' %}
.swatch { 
  
  margin : 0 auto;

}
/* Label */
.swatch .header {
  margin: 0.5em 0;
}
/* Hide radio buttons.*/
.swatch input { 
  display:none;
}
.swatch label {

  display : inline-block;

  /* Color swatches contain no text so they need to have a width. */

  min-width: 40px !important; 

  height: 30px !important;

  /* No extra spacing between them */

  margin:0;

  /* The border when the button is not selected */

  border : #ccc 1px solid;

  /* Styling text */

  text-transform : uppercase;
  
  white-space : nowrap;

  text-align : center;

  font-size : 13px;
  
}
.swatch-element label { padding:0 10px; }
.color.swatch-element label { padding:0; }
/* Styling selected swatch */
/* Slightly raised */

.swatch input:checked + label {

  border-color : transparent;

} 

.swatch .swatch-element {
  display : inline-block;
  -webkit-transform:translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing:antialiased; /* webkit text rendering fix */
  /* Spacing between buttons */
  margin:0px 10px 10px 0;
  /* To position the sold out graphic and tooltip */
  position:relative;
}
/* Image with the cross in it */
.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 {
  position: relative;
  filter: alpha(opacity=60); /* internet explorer */
  -khtml-opacity: 0.6;      /* khtml, old safari */
  -moz-opacity: 0.6;       /* mozilla, netscape */
  opacity: 0.6;           /* fx, safari, opera */
}
/* Tooltips */
.swatch .tooltip {
  text-align:center;
  background:gray;
  color:#fff;
  bottom:100%;
  padding: 10px;
  display:block;
  position:absolute;
  width:100px;
  left:{{ width | remove: 'px' | to_number | divided_by: 2 | minus: 50 | plus: 2 }}px;
  margin-bottom:15px;
  /* Make it invisible by default */
  filter:alpha(opacity=0);
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity:0;
  visibility:hidden;
  /* Animations */
  -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;
  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%;
}
/* CSS triangle */
.swatch .tooltip:after {
  border-left:solid transparent 10px;
  border-right:solid transparent 10px;
  border-top:solid gray 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;
}





/*

PRODUCT.LIQUID

*/

.product-submit {
  
  text-align : left;
  
}

.product-submit input {
  
  border : 2px solid #000000;
  
  -webkit-border-radius : 0;
  
  -moz-border-radius : 0;
  
  line-height : 40px;
  
  min-width : 148px;
  
  border-radius : 0;
  
  padding : 0 20px;
  
  display : block;
  
  margin : 20px 0;
    
}

.product-submit input:hover {
  
  background : #ffffff;
  
}

.add-to-cart.disabled:hover,
.add-to-cart.disabled {
  
  border-color : #f2f2f2;
  
  background : #f2f2f2;
  
}



/* swatches */


.swatch-element label,
.swatch-element {
  
  background : #ffffff;
  
  line-height : 30px;
  
  border : 0px;
  
}

.swatch input:checked + label {
  
  border-bottom : 2px solid #000000;
  
}

.swatch-element.available {
  
  /*border-bottom : 1px solid #000000 !important;*/
  
}

/* color */

.swatch .swatch-element.soldout label {
  
  border : 1px solid #444444;
  
}

.swatch-element.color label {
  
  opacity : .5;
  
}

.swatch-element.color.available label {
    
  opacity : 1;
  
}

/* Styling selected swatch */

.swatch .color input + label {

  border : none;

} 

.swatch .color input:checked + label {

  border : 2px solid #000000;
    
} 




/*

MEDIA

*/

@media (max-width: 720px) {
  
  .social-networks ul {

    text-align : center;

  }

}