/* filter model*/

.webform-image-select-filter{
  margin: 25px 0!important;
}

div.webform-form-filter input.webform-form-filter-text{
  padding: 0 14px;
  font-size: 10pt;
}

.js-form-item-model-auswahl-img-filter .form-item__suffix {
  margin: 15px!important;
  font-size: 10pt;
  color: rgba(84, 85, 96, 0.67);
  display:none;
}


/* filter model ende*/
.location_margin{
margin-top: -40px!important;
}


.form-item--mobile-festnetz-schneller-kontakt-phone{
  margin: 10px 0!important;
  margin-bottom:20px!important;
}

.form-type-webform-image-select.js-form-item.form-item.js-form-type-webform-image-select.form-type--webform-image-select.js-form-item-model-auswahl-img.form-item--model-auswahl-img{
margin-top: 25px;
}

.points_margin_start_time{
visibility:hidden!important;  
}

/* model img wahl style*/

ul.thumbnails.image_picker_selector li .thumbnail{
border-radius: 0;
padding: 0;
overflow:hidden;
border: 1px solid transparent!important;
transition: all .3s;
cursor: pointer;
}

ul.thumbnails.image_picker_selector li .thumbnail:hover {
border:1px solid #8b21ff!important;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 0 0 5px #8b21ff;
}

ul.thumbnails.image_picker_selector{
padding: 20px;
transform: translateX(-20px);
}



ul.thumbnails.image_picker_selector li .thumbnail img {
max-width: 130px!important;
}

.thumbnails.image_picker_selector p {
margin: 0;
text-align: center;
position: relative;
bottom: 3px;
}

ul.thumbnails.image_picker_selector li .thumbnail.selected {
background: #42c21c;
}

ul.thumbnails.image_picker_selector li .thumbnail:focus {
box-shadow: none!important;
border-color: whitesmoke!important;
}

ul.thumbnails.image_picker_selector li .thumbnail.selected,ul.thumbnails.image_picker_selector li .thumbnail.selected:focus {
background: #8b21ff!important;
-webkit-box-shadow: 0 0 0 5px #8b21ff!important;
box-shadow: 0 0 0 5px #8b21ff!important;
border-color: #8b21ff!important;
border-radius: 16px;
}

.js-form-item-model-auswahl-img-filter .form-item__suffix{
margin:30px;
}


.webform-image-select-filter.js-form-item form-item.js-form-type-search form-type--search.js-form-item-model-auswahl-img-filter.form-item--model-auswahl-img-filter.form-item--no-label{
margin: 20px 0;
}

.form-type-webform-image-select.js-form-item form-item.js-form-type-webform-image-select.form-type--webform-image-select.js-form-item-model-auswahl-img.form-item--model-auswahl-img{
margin: 20px 0;
}

.model_wahl_scroll_hint{
display:none;
}

/* color faerbung style*/

.thumbnails.image_picker_selector p{
color: white;
transition: all .3s;
}

ul.thumbnails.image_picker_selector li .thumbnail.selected p{
color:#8b21ff!important;
transition: all .3s;
}

@media(min-width:800px) and (max-width:1024px){
ul.thumbnails.image_picker_selector{
display: contents;
}}

/* fix zweier kacheln */

@media(min-width:769px) and (max-width:800px){
    ul.thumbnails.image_picker_selector li {
        margin-right: 25px!important;
        }
}

@media(min-width:768px) and (max-width:1024px){

/*
.model_wahl_scroll_hint{
display:block!important;
width: max-content;
padding: 10px 15px;
border: 1px solid;
background: #8b21ff;
border-radius: 30px;
margin-top: 10px;
color: white;
pointer-events:none;
}
*/
  
.layout-container {
margin-right: 0!important;
margin-left: 0!important;
overflow-x: hidden!important;
}

ul.thumbnails.image_picker_selector::-webkit-scrollbar {
display: none;
-webkit-appearance: none;
appearance: none;
-moz-appearance: none;
}	

ul.thumbnails.image_picker_selector{
overflow-y: hidden;
overflow-x: scroll;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}

ul.thumbnails.image_picker_selector li .thumbnail img {
max-width: 270px!important;
}

ul.thumbnails.image_picker_selector li .thumbnail{
scroll-snap-align: start;
scroll-snap-margin: 25px;
scroll--margin: 25px;
height: 270px;
border-radius: 16px;
}

ul.thumbnails.image_picker_selector li{
margin: 20px;
margin-left: 0;
margin-right: 30px;
}

.thumbnails.image_picker_selector p{
bottom: 246px;
font-size: 22pt;
}

ul.thumbnails.image_picker_selector li .thumbnail[title="Celina"] img{
position: relative;
top: -64px;
}

ul.thumbnails.image_picker_selector li .thumbnail[title="Felix"] img{
position: relative;
top: -47px;
}
  
ul.thumbnails.image_picker_selector li .thumbnail[title="Hanna"] img{
position: relative;
top: -47px;
}

ul.thumbnails.image_picker_selector li .thumbnail[title="Lucienne"] img{
position: relative;
top: -88px;
}
  
ul.thumbnails.image_picker_selector li .thumbnail[title="Kevin"] img{
    position: relative;
    top: -40px;
}

ul.thumbnails.image_picker_selector li .thumbnail[title="Sascha"] img{
    position: relative;
    top: -40px;
}
 
  
ul.thumbnails.image_picker_selector li .thumbnail[title="Selina"] img{
position: relative;
top: -27px;
}

ul.thumbnails.image_picker_selector li .thumbnail[title="Shaminah"] img{
position: relative;
top: -65px;
}
  
ul.thumbnails.image_picker_selector li .thumbnail[title="Shaminah"] img{
position: relative;
top: -56px;
}
  
ul.thumbnails.image_picker_selector li .thumbnail[title="Taner"] img{
top: -56px;
position: relative;
}

ul.thumbnails.image_picker_selector li .thumbnail[title="Valerie"] img{
top: -38px;
position: relative;
}
 
ul.thumbnails.image_picker_selector li .thumbnail[title="Viktoria"] img{
position: relative;
top: -32px;
}


}


@media(max-width:769px) and (min-width:767px){
ul.thumbnails.image_picker_selector {
display: flex;
overflow-y: hidden;
overflow-x: scroll;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
width: 100vw;
padding-right: 0;
transform: translateX(-30px);
padding-left: 0;
}

.layout-container {
margin-right: 0!important;
margin-left: 0!important;
overflow-x: hidden!important;
}

}

@media(max-width:767px){
  
.layout-container {
margin-right: 0!important;
margin-left: 0!important;
overflow-x: hidden!important;
}

ul.thumbnails.image_picker_selector {
display: flex;
overflow-y: hidden;
overflow-x: scroll;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
width: 100vw;
padding-right: 0;
transform: translateX(-30px);
padding-left: 0;
}

ul.thumbnails.image_picker_selector li{
transform: translateX(30px);
}

ul.thumbnails.image_picker_selector::-webkit-scrollbar {
display: none;
-webkit-appearance: none;
appearance: none;
-moz-appearance: none;
}	

ul.thumbnails.image_picker_selector li .thumbnail{
scroll-snap-align: start;
scroll-snap-margin: 25px;
scroll--margin: 25px;
}

.js-form-item-model-auswahl-img-filter .form-item__suffix {
margin: 40px 25px;
position: relative;
top: 10px;
}

ul.thumbnails.image_picker_selector li{
margin: 20px 0;
margin-right: 20px;
}

ul.thumbnails.image_picker_selector li .thumbnail img{
max-width: 270px!important;
}

ul.thumbnails.image_picker_selector li .thumbnail{
height: 270px;
border-radius: 16px;
}

.thumbnails.image_picker_selector p {
margin: 0;
text-align: center;
position: relative;
bottom: 287px;
font-size: 21pt;

}

.thumbnails.image_picker_selector .thumbnail.selected {
color: #fff!important;
}


}

/* unique model cards position mobile version */

@media(max-width:767px){

ul.thumbnails.image_picker_selector li .thumbnail[title="Celina"] img{
position: relative;
top: -124px;
}

ul.thumbnails.image_picker_selector li .thumbnail[title="Felix"] img{
top: -111px;
position: relative;
}
  
ul.thumbnails.image_picker_selector li .thumbnail[title="Hanna"] img{
position: relative;
top: -47px;
}

ul.thumbnails.image_picker_selector li .thumbnail[title="Lucienne"] img{
top: -111px;
position: relative;
}
  
ul.thumbnails.image_picker_selector li .thumbnail[title="Selina"] img{
position: relative;
top: -36px;
} 
  
  ul.thumbnails.image_picker_selector li .thumbnail[title="Kevin"] img{
    position: relative;
    top: -40px;
  }
  
  ul.thumbnails.image_picker_selector li .thumbnail[title="Sascha"] img{
    position: relative;
    top: -40px;
  }

ul.thumbnails.image_picker_selector li .thumbnail[title="Shaminah"] img{
top: -81px;
position: relative;
}
  
ul.thumbnails.image_picker_selector li .thumbnail[title="Shaminah"] img{
position: relative;
top: -56px;
}
  
ul.thumbnails.image_picker_selector li .thumbnail[title="Taner"] img{
top: -56px;
position: relative;
}

ul.thumbnails.image_picker_selector li .thumbnail[title="Valerie"] img{
top: -78px;
position: relative;
}

ul.thumbnails.image_picker_selector li .thumbnail[title="Viktoria"] img{
top: -80px;
position: relative;
}

}

@media(max-width:320px){
ul.thumbnails.image_picker_selector li .thumbnail{
height: 230px;
}

ul.thumbnails.image_picker_selector li .thumbnail img {
max-width: 230px!important;
}

.thumbnails.image_picker_selector p {
bottom: 258px;
}


ul.thumbnails.image_picker_selector li .thumbnail[title="Celina"] img {
position: relative;
top: -78px;
}

ul.thumbnails.image_picker_selector li .thumbnail[title="Felix"] img {
top: -94px;
position: relative;
}

ul.thumbnails.image_picker_selector li .thumbnail[title="Lucienne"] img {
top: -105px;
position: relative;
}
  
  ul.thumbnails.image_picker_selector li .thumbnail[title="Kevin"] img{
    position: relative;
    top: -40px;
  }
  
  ul.thumbnails.image_picker_selector li .thumbnail[title="Sascha"] img{
    position: relative;
    top: -40px;
  }

ul.thumbnails.image_picker_selector li .thumbnail[title="Shaminah"] img {
top: -70px;
position: relative;
}
  
ul.thumbnails.image_picker_selector li .thumbnail[title="Taner"] img{
top: -56px;
position: relative;
}

ul.thumbnails.image_picker_selector li .thumbnail[title="Valerie"] img{
top: -70px;
position: relative;
}

ul.thumbnails.image_picker_selector li .thumbnail[title="Viktoria"] img{
top: -70px;
position: relative;
}

  
  
}



/* style min-width 1025px*/

@media(min-width:1025px){

ul.thumbnails.image_picker_selector {
width: 100%;
}

ul.thumbnails.image_picker_selector li{
margin: 20px;
margin-left: 0;
margin-right: 40px;
}

ul.thumbnails.image_picker_selector li .thumbnail img {
max-width: 170px!important;
}

.thumbnails.image_picker_selector p {
position: relative;
bottom: 170px;
font-size: 21pt;
color: rgb(212, 55, 55);
color: white;
}

ul.thumbnails.image_picker_selector li .thumbnail{
height: 170px;
border-radius: 16px;
}

  

ul.thumbnails.image_picker_selector li .thumbnail[title="Celina"] img{
position: relative;
top: -47px;
}

ul.thumbnails.image_picker_selector li .thumbnail[title="Felix"] img{
position: relative;
top: -27px;
}
  
ul.thumbnails.image_picker_selector li .thumbnail[title="Hanna"] img{
position: relative;
top: -47px;
}

ul.thumbnails.image_picker_selector li .thumbnail[title="Lucienne"] img{
position: relative;
top: -29px;
}
  
  ul.thumbnails.image_picker_selector li .thumbnail[title="Kevin"] img{
    position: relative;
    top: -28px;
  }
  
  ul.thumbnails.image_picker_selector li .thumbnail[title="Sascha"] img{
    position: relative;
    top: -40px;
  }

ul.thumbnails.image_picker_selector li .thumbnail[title="Shaminah"] img{
position: relative;
top: -8px;
}

ul.thumbnails.image_picker_selector li .thumbnail[title="Viktoria"] img{
position: relative;
top: -17px;
} 

ul.thumbnails.image_picker_selector li .thumbnail[title="Selina"] img{
    top: -23px;
    position: relative;
}

ul.thumbnails.image_picker_selector li .thumbnail[title="Valerie"] img{
    top: -26px;
position: relative;
}
  
ul.thumbnails.image_picker_selector li .thumbnail[title="Taner"] img{
    top: -39px;
position: relative;
}

ul.thumbnails.image_picker_selector li .thumbnail[title="Lucienne"] img{
    position: relative;
    top: -45px;
}

ul.thumbnails.image_picker_selector li .thumbnail[title="Viktoria"] img{
    position: relative;
    top: -16px;
}  

}


@media (width:768px){
    ul.thumbnails.image_picker_selector li .thumbnail img {
        max-width: 230px!important;
        }

    ul.thumbnails.image_picker_selector li .thumbnail {
        height: 230px;
        }
}