/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */



 #blinds{
    border-top:5px solid #000;
    position: relative;
}
#blinds .blind-container {
    margin-left:10px;
    margin-right:10px;
      display:-webkit-flex;
    -webkit-justify-content:center;
  
    display:flex;
    justify-content:center;
}
#blinds .rope{
    width:5px;
    background:#ffffff;
    border:2px dotted #000;
    height:200px;
  
    position: absolute;
}
#blinds .rope-left{
    left:0;
}#blinds .rope-right{
    right:0;
    top:0;
}
.arika-curtains .rope{
  display: none;
}
.arika-curtains[data-bediening="Links"] .rope-left{
    display: block !important;
}
.arika-curtains[data-bediening="Rechts"] .rope-right{
    display: block !important;
}
#blinds  div.blind{
    height:400px;
-webkit-flex:1;
    flex:1;
    border:2px solid #fff;
    background: #dcdcdc;
}#blinds  div.blind:hover{
	cursor: url('https://www.arikakozijnen.nl/wp-content/plugins/arika-curtains/public/css/cursor.png'), auto;
}
.image_labels input{
    display:none;
}
.image_labels label{
    display: block;
    width:20%;
    float:left;
  text-align: center;
}
.image_labels label img{
   border:3px solid transparent;
}
@media only screen and (max-width: 600px) {
.image_labels label{
      width: 31%;
}
}
.image_labels input:checked + label img{
    border:3px solid #000;
    border-radius: 10px;
}
.arika-curtains-options{
 width:100%;
    clear: both;
    overflow: hidden;
    margin-bottom:10px;
}
.arika-curtains-options .input-field {
width:48%;
float:left;
    margin:1%;
}
.arika-curtains-options .input-field label,.arika-curtains-options .input-field input{
    width:100%;
    
}

.arika-curtains p{
    margin:0;
}
.arika-curtains h4{
    font-weight: bold;
     margin-bottom:10px;
    border-bottom: 1px dotted #e0e0e0;
}
.arika-curtains p{
 color:#6d6d6d; 
  margin-bottom:10px;
    font-style: italic;
}
.curtain-colors input[type=radio]{
	display: none;
}

.curtain-colors input[type=radio]:checked + label span {
  transform: scale(1.25);
}
.curtain-colors input[type=radio]:checked + label .white {
  border: 2px solid #000;
}
.curtain-colors input[type=radio]:checked + label .beige {
  border: 2px solid #000;
}
.curtain-colors input[type=radio]:checked + label .brown {
  border: 2px solid #000;
}
.curtain-colors input[type=radio]:checked + label .green {
  border: 2px solid #000;
}
.curtain-colors input[type=radio]:checked + label .bleu {
  border: 2px solid #000;
}
.curtain-colors input[type=radio]:checked + label .pink {
  border: 2px solid #000;
}
.curtain-colors input[type=radio]:checked + label .grey {
  border: 2px solid #000;
}


.curtain-colors label {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin-right: 10px;
  cursor: pointer;
}
.curtain-colors label:hover span {
  transform: scale(1.25);
}
.curtain-colors label span {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.2s ease-in-out;
}
.curtain-colors label span.white {
  background: #E3E5E2;
}
.curtain-colors label span.beige {
  background: #DEA177;
}
.curtain-colors label span.brown {
  background: #79553B;
}
.curtain-colors label span.green {
  background: #1F5C3D;
}
.curtain-colors label span.bleu {
  background: #AFDDEA;
}
.curtain-colors label span.pink {
  background: #ED97A4;
}
.curtain-colors label span.grey {
  background: #2185d0;
}


/*Website fix*/
.codeies_arikacurtain_enabled .product-images{
    display:none !important
}
.single-product.codeies_arikacurtain_enabled .summary form.cart{
    background: transparent !important
}
html  .codeies_arikacurtain_enabled form.cart .arika-curtains  label:not(.imageLabel){
  
}
html  .codeies_arikacurtain_enabled form.cart .arika-curtains .image_labels label.imageLabel{
    width:20% !important;
}
.pakketzijde_container,.bediening_container,.montage_container {
    display: block; 
    width:100% !important;
    overflow: hidden;
    clear:both;
}
.single-product .summary form.cart .arika-curtains-options .input-field input{
      width: 100% !important
}
.single-product .summary form.cart .arika-curtains-options .curtain-colors {
    margin-left:10px;
}
.single-product .summary form.cart .arika-curtains-options .curtain-colors label{
   width:32px !important; 
    
}
@media only screen and (max-width: 600px) {
html  .codeies_arikacurtain_enabled form.cart .arika-curtains .image_labels label.imageLabel{
    width:32% !important;
}
}