/* Shop Detail Bilder Slider */

.shop-slider-lang {
    margin-bottom: 2rem;
}

.shop-slider-lang.preview li {
    border: 1px solid #eee;
}

.shop-slider-lang.model img,
.shop-slider-lang.model video {
    width: 100%;
    height: auto;
    object-fit: unset;
    position: relative;
    top: unset;
    left: unset;
}


/* Model-Detail */

.sizeTable {
    font-family: var(--main-font-fa);
}

.detail.shop .lang.size {
    display: flex;
    align-items: center;
    margin: 2rem 0;
    width: unset;
    justify-content: flex-start;
    flex-wrap: nowrap;
    padding-bottom: 2rem;
    border-bottom: 1px solid #eee;
}

.detail.shop .lang.size.title {
    font-family: var(--main-font);
    font-weight: 400;
    margin-bottom: 1rem;
    border: none;
    padding: 0;
}

.detail.shop .lang.size .label {
    font-weight: 800;
    font-size: 1.1rem;
    padding-right: 1rem;
}

.detail.shop .lang.size .links.size a {
    padding: 10px;
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0 0.5rem;
    background: #ccc;
    display: inline-block;
    min-width: 55px;
    text-align: center;
}

.detail.shop .lang.size .links.size .buttonBack {
    font-size: 0.9rem;
    background: none;
}

.detail.shop .lang.size .links.size .open {
    background-color: var(--main-color);
    color: white;
}

.detail.shop .lang.size .links.size a:hover {
    background: var(--main-color);
    color: white;
    transition: all 0.5s ease-out;
}


/* verwendete Garne */

.yarnList .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.yarnList .list .yarnItem {
    width: 100%;
}

.yarnList .list .item.usageYarn {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
}

.yarnList .list .item.usageYarn .image:hover {
    opacity: 0.5;
    transition: all 0.5s ease-out;
}

.yarnList .list .item.usageYarn .image {
    width: 30%;
}

.yarnList .list .item.usageYarn .item {
    width: 65%;
}

.yarnList .list .item.usageYarn .item .title {
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.yarnList .list .item.usageYarn .item .title .text {
    font-size: 0.8rem;
}

.yarnList .list .item.usageYarn .item .attributes {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 1rem 0;
    justify-content: space-between;
    font-size: 0.8rem;
}

.yarnList .list .item.usageYarn .item .attributes .item {
    width: unset!important;
    display: flex;
    flex-wrap: wrap;
    margin: 0.25rem 0;
    justify-content: space-between;
    min-width: 40%;
}

.yarnList .list .item.usageYarn .item .attributes .item .label {
    font-weight: 900;
    width: 45%;
    letter-spacing: 0.75px;
    word-break: keep-all;
}


/* Materialliste */

.yarnList .list.usage {
    margin: 0 -2.5%;
    justify-content: flex-start;
    align-items: baseline;
}

.yarnList .list.usage .item {
    margin: 0 2.5% 2rem 2.5%;
}

.yarnList .list.usage .item .title {
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.yarnList .list.usage .item .link {
    margin-top: 0.5rem;
    font-family: var(--main-font-fa);
    cursor: pointer;
}

.yarnList .list .item.article {
    width: 20%;
    margin: 0 2.5% 2rem 2.5%;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}

.yarnList .list .item.article:hover {
    transform: scale(1.1);
    transition: all 0.5s ease-out;
}

.yarnList .list .item.article .image {
    position: relative;
}

.yarnList .list .item.article .image .yarnSoldOut {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1;
    color: white;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-align: center;
}

.yarnList .list .item.article .image img {
    display: block;
    width: 100%!important;
    height: auto;
}

.yarnList .list .item.article .content {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0 0.25rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    margin: 0;
}

.yarnList .list .item.article .content .count,
.yarnList .list .item.article .content .weight {
    width: 100%;
    font-family: var(--main-font-fa);
    text-align: center;
}

.yarnList .list .item.article .content .count .icon,
.yarnList .list .item.article .content .weight .icon {
    font-size: 1.5rem;
    font-weight: 100;
    margin-bottom: 0.25rem;
}


/* Verbrauchsliste: PopUp */

.layerModelUsagePopUpBackground {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
    order: 0;
}

.layerModelUsagePopUp {
    position: absolute;
    background-color: #FFFFFF;
    width: 90%;
    max-height: 90%;
    max-width: 1300px;
    top: 5%;
    left: 0;
    right: 0;
    margin: 0 auto;
    overflow: auto;
}

.layerModelUsagePopUp .head {
    border-bottom: 1px solid #CCCCCC;
    padding-bottom: 20px;
}

.layerModelUsagePopUp .head .title {
    font-size: 150%;
    padding-right: 40px;
}

.layerModelUsagePopUp .close {
    position: absolute;
    right: 20px;
    top: 20px;
    font-family: var(--fa-font);
    font-weight: 300;
    cursor: pointer;
    font-size: 200%;
}

.layerModelUsagePopUp img {
    width: 100%;
    height: auto;
}

.layerModelUsagePopUp img:hover {
    cursor: pointer;
    box-shadow: 0 0 3px #000000;
}

.layerModelUsagePopUp>.inner {
    position: relative;
    padding: 40px 40px 0 40px;
}

.layerModelUsagePopUpCurrent {
    margin: 1rem -2.5% 1rem -2.5%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: baseline;
}

.layerModelUsagePopUpCurrent .item {
    width: 15%;
}

.layerModelUsagePopUpCurrent .title,
.layerModelUsagePopUpAlternatives .title {
    font-weight: 700;
    font-style: normal;
    font-size: 1rem!important;
}

.layerModelUsagePopUpCurrent .item .number {
    margin-bottom: 10px;
}

.layerModelUsagePopUpAlternatives {
    margin: 0 -2.5%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    text-align: center;
}

.layerModelUsagePopUpAlternatives .item {
    width: 15%;
    margin: 0 2.5% 2rem 2.5%;
}


/* Verbrauchsliste: Zubehör */

.layerModelUsageAccessoires {
    border-top: 1px #CCCCCC solid;
    padding-top: 20px;
    margin-bottom: 20px;
}

.layerModelUsageAccessoires .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.layerModelUsageAccessoires .content .item-head {
    font-size: 90%;
    margin-bottom: 10px;
    line-height: 15px;
    width: 100%;
}

.layerModelUsageAccessoires .content .item {
    width: 100%;
}

.layerModelUsageAccessoires .countryflag {
    height: auto;
    width: 25px;
    margin: 0 auto;
}

.layerModelUsageAccessoires .content .item {
    margin-bottom: 5px;
    padding: 5px 0 5px 10px;
    font-size: 90%;
    background-color: #f2f2f2;
}

.layerModelUsageAccessoires .content .item a {
    text-decoration: none;
    color: #333333;
}

.layerModelUsageAccessoires .content .item a:before {
    content: '\f08e\00A0';
    font-family: var(--fa-font);
    font-weight: 300;
}

.layerModelUsageAccessoires .content .attribute {
    float: right;
    width: 40px;
    text-align: center;
    color: #000;
}


/* Verbrauchsliste: Action */

.layerModelUsageAction {
    border-top: 1px #CCCCCC solid;
    padding-top: 20px;
    position: relative;
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.layerModelUsageAction .button {
    box-sizing: border-box;
    padding: 0 20px;
    margin: 0;
    border: none;
    background: none;
    height: 50px;
    cursor: pointer;
    background-color: var(--main-color);
    color: white;
    border-radius: 3px;
    display: flex;
    align-items: center;
    font-weight: 800;
    font-family: var(--main-font);
    font-size: 1rem;
    letter-spacing: 1px;
}

.layerModelUsageAction .button.file,
.layerModelUsageAction .button.print {
    box-sizing: border-box;
    padding: 0 20px;
    margin: 0;
    border: none;
    background: none;
    height: 50px;
    cursor: pointer;
    background-color: none;
    color: #333;
    border-radius: 3px;
    display: flex;
    align-items: center;
    font-weight: 800;
    font-family: var(--main-font);
    font-size: 1rem;
    letter-spacing: 1px;
}

.layerModelUsageAction .PDF {
    font-family: var(--fa-font);
    font-weight: 300;
    font-size: 150%;
    color: #000;
}

.layerModelUsageAction .button:hover {
    color: #f2f2f2;
    background-color: #333333;
}

.layerModelUsageAction .file:before {
    font-size: 1.4rem;
    font-weight: 100;
    font-family: var(--fa-font);
    padding-right: 0.5rem;
    content: '\f1c1';
}

.layerModelUsageAction .print:before {
    font-size: 1.4rem;
    font-weight: 100;
    font-family: var(--fa-font);
    padding-right: 0.5rem;
    content: '\f02f';
}

.layerModelUsageAction .buy:before {
    font-size: 1.4rem;
    font-weight: 100;
    font-family: var(--fa-font);
    padding-right: 0.5rem;
    content: '\f290';
}

.layerModelUsageAction .withPattern:before {
    font-family: var(--fa-font);
    font-weight: 300;
    content: '\f00c';
    display: inline-block;
    margin-right: 5px;
}

.layerModelUsageAction .withoutPattern:before {
    font-family: var(--fa-font);
    font-weight: 300;
    content: '\f05e';
    display: inline-block;
    margin-right: 5px;
}

.layerModelUsageAction .popupAction {
    position: absolute;
    bottom: 100%;
    right: 0;
    background-color: #FFFFFF;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    padding: 10px 10px 0 10px;
    border-radius: 3px;
    margin-bottom: -10px;
    display: none;
}

.layerModelTemplate .popupAction .button {
    width: auto;
    height: auto;
    padding: 5px 10px;
    display: block;
    margin-bottom: 10px;
    width: 180px;
    text-align: left;
}

.layerModelUsageAction .left {
    width: 50%!important;
    display: flex;
}

@media only screen and (max-width: 1000px) {
    .shop-slider-lang.preview {
        display: none;
    }
}

@media only screen and (max-width: 650px) {
    .layerModelUsagePopUpAlternatives .item,
    .layerModelUsagePopUpCurrent .item {
        width: 20%;
    }
    .yarnList .list .item.article {
        width: 28.333%;
    }
}

@media only screen and (max-width: 500px) {
    .layerModelUsagePopUpAlternatives .item,
    .layerModelUsagePopUpCurrent .item {
        width: 28.333%;
    }
    .yarnList .list .item.article {
        width: 45%;
    }
    .yarnList .list .item.usageYarn .image,
    .yarnList .list .item.usageYarn .item {
        width: 100%;
    }
    .layerModelUsageAction {
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .layerModelUsageAction .left,
    .layerModelUsageAction .right {
        width: 100%!important;
    }
    .layerModelUsageAction .button {
        margin: 10px 0 0 0;
        display: unset;
        width: 100%;
    }
    .detail.shop .lang.size {
        flex-wrap: wrap;
    }
    .detail.shop .lang.size .value.size {
        margin-left: -0.5rem;
        margin-top: 0.5rem;
    }
}

@media only screen and (max-width: 400px) {
    .layerModelUsagePopUpAlternatives .item,
    .layerModelUsagePopUpCurrent .item {
        width: 45%;
    }
}