.layerDetailTemplate {
    width: 100%;
}

.layerDetailTemplate .content-item {
    padding: 0;
}

.layerDetailTemplate .buttonClose {
    font-family: fontawesome;
    position: fixed;
    left: 0;
    background: black;
    color: white;
    padding: 10px 25px;
    font-size: 2.5rem;
    height: 50px;
    width: 90px;
    z-index: 999;
}

.layerDetailTemplate .buttonClose .icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    line-height: 3.25rem;
}

.layerDetailTemplate .buttonClose .icon:hover {
    animation: bounce 1s infinite;
}


/* Container */

.layerDetailTemplate .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: row;
    width: 95%;
}

.layerDetailTemplate .list .item.left {
    width: 48%;
    position: relative;
}

.layerDetailTemplate .article-image .image {
    max-width: 550px;
    height: auto;
}

.layerDetailTemplate .list .item.left .article-image video {
    max-width: 550px;
    height: auto;
}

.layerDetailTemplate .list .item.left .article-image {
    width: 100%;
}

.layerDetailTemplate .list .item.left .article-image.publication {
    text-align: right;
}

.layerDetailTemplate .list .item.left .article-image.publication img {
    max-width: 400px;
    height: auto;
}

.layerDetailTemplate .list .item.right {
    width: 48%;
}

.layerDetailTemplate .list .item.right h1 {
    text-transform: uppercase;
}

.layerDetailTemplate .list .item.right small {
    padding-left: 10px;
    font-size: 1.2rem;
}

.layerDetailTemplate .slider-detail .list {
    justify-content: flex-start;
}

.layerDetailTemplate .list .item.left .flag {
    position: absolute;
    right: 0;
    top: 10px;
    height: 25px;
}


/* Artikeldaten */

.layerDetailTemplate .attributes {
    margin: 40px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
}

.layerDetailTemplate .attributes .item {
    width: 55%;
    margin-bottom: 25px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.layerDetailTemplate .attributes .item:nth-child(even) {
    width: 43%;
}

.layerDetailTemplate .attributes .item .label {
    font-weight: 700;
    width: 45%;
}

.layerDetailTemplate .attributes .item .value {
    width: 55%;
}

.layerDetailTemplate .contentLight {
    font-weight: 300;
}


/* Bildvorschau */

.layerDetailTemplate .article-image-small {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 20px 0;
    margin: 20px 0;
    width: 100%;
}

.layerDetailTemplate .article-image-small video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 1;
}

.layerDetailTemplate .article-image-small .image-list {
    display: flex;
    margin: 0 -2.5%;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.layerDetailTemplate .article-image-small .image-list .item {
    margin: 0 2.5%;
    width: 15%;
    height: 7vw;
    background-position: center;
    background-size: cover;
    border: 1px solid #eee;
    position: relative;
    cursor: pointer;
    font-size: 1.6em;
    text-align: center;
    line-height: 7vw;
    overflow: hidden;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    display: flex;
}

.layerDetailTemplate .article-image-small .image-list.model .item {
    margin: 1rem 2.5%;
    width: 15%;
    height: 21vh;
    background-position: center;
    background-size: cover;
    border: 1px solid #eee;
    position: relative;
    cursor: pointer;
    font-size: 1.6em;
    text-align: center;
    line-height: 7.5rem;
    overflow: hidden;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    display: flex;
}

.layerDetailTemplate .article-image-small .image-list.model .item.video {
    margin: 0 2.5%;
    width: 15%;
    height: 21vh;
    background-position: center;
    background-size: cover;
    border: 1px solid #eee;
    position: relative;
    cursor: pointer;
    font-size: 1.6em;
    text-align: center;
    line-height: 7.5rem;
    overflow: hidden;
    background-color: black;
}

.layerDetailTemplate .article-image-small .image-list.model .item.video:before {
    content: '\f04b';
    font-family: fontawesome;
    color: white;
    /* transition: all 0.5s ease-out; */
    /* display: flex; */
    /* flex-wrap: nowrap; */
    /* align-items: center; */
    /* align-content: space-between; */
    /* justify-content: center; */
    /* width: 100%; */
    /* background: black; */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.6);
    line-height: 17vh;
}

.layerDetailTemplate .article-image-small .image-list #item360:before {
    content: '\f0e2\00A0 360°';
    font-family: 'fontawesome', 'futura-pt';
    font-size: 1.5vw;
    width: 100%;
}

.layerDetailTemplate .article-image-small .image-list #item360:hover:before {
    content: '\f00c';
}

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

.layerDetailTemplate .article-image-small .image-list .item.active:before,
.layerDetailTemplate .article-image-small .image-list .item:hover:before {
    content: '\f00c';
    font-family: fontawesome;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    transition: all 0.5s ease-out;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    align-content: space-between;
    justify-content: center;
    width: 100%;
}

.layerDetailTemplate .article-image-small .image-list img {
    max-height: 150px;
    width: auto;
}

.layerDetailTemplate .article {
    width: 100%;
}

.layerDetailTemplate .active {
    display: block;
}

.layerDetailTemplate .inactive {
    display: none!important;
}

.layerDetailTemplate .imageFallBack.inactive {
    display: block!important;
}


/* Artikelliste */

.layerDetailTemplate .article h2 {
    font-weight: 700;
    margin-bottom: 15px;
}

.layerDetailTemplate .article .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    margin: 0 -2.5%;
    width: 105%;
}

.layerDetailTemplate .article .list .item {
    width: 11.666%;
    margin: 0.25rem 2.5%;
    cursor: pointer;
}

.layerDetailTemplate .article .list .item:hover {
    z-index: 5;
}

.layerDetailTemplate .article .list .item.articleColor {
    display: inline-block;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.layerDetailTemplate .article .list .item.articleColor .image.onclick {
    margin-top: 100%;
}

.layerDetailTemplate .article .list .item.articleColor .img {
    position: absolute;
    top: -25%;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
}


/*.layerDetailTemplate .article .list .item.articleColor {
    width: 60px;
    height: 60px;
    background-position: center;
    background-size: cover;
    cursor: pointer;
    position: relative;
    margin: 10px;
}


.layerDetailTemplate .article .list .item.articleColor .image {
    width: 60px;
    height: 60px;
}*/

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

.layerDetailTemplate .article .list .item.articleColor .flag {
    position: absolute;
    z-index: 1;
    bottom: 5px;
    right: unset;
    left: 0;
    top: unset;
    background: white;
    text-transform: uppercase;
    font-size: 0.8rem;
    padding: 2px 3px;
    letter-spacing: 0;
    color: #000;
    font-weight: 300;
}

.layerDetailTemplate .article .list .item.articleColor .flag.new {
    position: absolute;
    z-index: 1;
    bottom: 30px;
    right: unset;
    left: 0;
    top: unset;
    background: white;
    text-transform: uppercase;
    font-size: 0.8rem;
    padding: 2px 3px;
    letter-spacing: 0;
    color: #000;
    font-weight: 300;
}

.articleLink,
.item.right .articleLink {
    border-top: 1px solid #ccc;
    margin-top: 25px;
    padding-top: 25px;
    width: 100%!important;
}

.articleLink .link {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    margin: 13px 0;
    padding-left: 45px;
    position: relative;
    width: 100%;
}

.articleLink .link:hover {
    animation: bounce 1s ease;
    color: #ccc;
}

.link.model:before {
    content: '\f553\00A0\00A0';
    font-size: 1.8rem;
    line-height: 1.2rem;
    position: absolute;
    top: 0;
    left: 0;
    font-family: fontawesome;
    font-weight: 300;
}

.link.pdf:before {
    content: '\f1c1\00A0\00A0';
    font-size: 1.8rem;
    line-height: 1.2rem;
    position: absolute;
    top: 0;
    left: 7px;
    font-family: fontawesome;
    font-weight: 300;
}

.link.pos:before {
    content: '\f54e\00A0\00A0';
    font-size: 1.8rem;
    line-height: 1.2rem;
    position: absolute;
    top: 0;
    left: 0;
    font-family: fontawesome;
    font-weight: 300;
}

.link.shop:before {
    content: '\f07a\00A0\00A0';
    font-size: 1.8rem;
    line-height: 1.2rem;
    position: absolute;
    top: 0;
    left: 0;
    font-family: fontawesome;
    font-weight: 300;
}

.link.publication:before {
    content: '\f02d\00A0\00A0';
    font-size: 1.8rem;
    line-height: 1.2rem;
    position: absolute;
    top: 0;
    left: 0;
    font-family: fontawesome;
    font-weight: 300;
}

#linkFullscreen {
    font-family: fontawesome;
    position: absolute;
    top: 0;
    right: 0;
}

#linkFullscreen:hover {
    animation: pulsed 1s infinite;
}


/* Maschenprobe */

.layerGauge {
    width: 100px;
    height: 100px;
    border: 1px solid #000000;
    position: relative;
}

.layerGaugeRight {
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    border-left: 1px solid #000000;
    width: 10px;
}

.layerGaugeRightValue {
    position: absolute;
    line-height: 100px;
    left: 100%;
    top: 0;
    padding-left: 10px;
}

.layerGaugeBottom {
    height: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #000000;
    width: 100%;
}

.layerGaugeBottomValue {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    text-align: center;
    padding-top: 10px;
}


/* Materialliste */

.yarnList .title {
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
}

.yarnList .title.usage {
    margin-top: 50px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.containerUsage .action {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 1.5rem;
}

.containerUsage .action #loading {
    width: 100%;
    margin-top: 0.5rem;
    text-align: center;
}

.yarnList .link {
    margin: 10px 0;
}

.yarnList .link.pdf {
    position: relative;
    padding-left: 20px;
    font-weight: 300;
}

.yarnList .link.pdf:before {
    content: '\f1c1\00A0\00A0';
    font-size: unset;
    line-height: 1.2rem;
    position: absolute;
    top: 0;
    left: 0;
    font-family: fontawesome;
    font-weight: 300;
}

.yarnList .item.size {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin: 25px 0;
}

.yarnList .item.size .label {
    font-weight: 600;
    margin-right: 20px;
    margin: 1rem 20px 1rem 0;
}

.yarnList .item.size .value {
    display: flex;
    flex-wrap: wrap;
}

.yarnList .sizeselector {
    background: white;
    color: black;
    padding: 8px 15px;
    margin: 0 20px 20px 0;
    border: 1px solid black;
}

.yarnList .sizeselector.selected {
    background: black;
    color: white;
}

.yarnList .yarnItem {
    margin: 2rem 0;
}

.item.usageYarn {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
}

.button-ausverkauft {
    position: absolute;
    top: 37%;
    left: 0;
    right: 0;
    color: white;
    background: black;
    text-align: center;
    padding: 8px;
    font-size: 1rem;
    font-weight: 700;
}

.item.usageYarn .title {
    margin-bottom: 0.25rem;
}

.item.usageYarn .image {
    width: 27%;
    position: relative;
}

.item.usageYarn .item {
    width: 70%;
}

.item.usageYarn .item .attributes {
    margin: 20px 0;
    font-size: 0.9rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: baseline;
}

.item.usageYarn .item .attributes .item {
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    width: unset;
}

.item.usageYarn .item .attributes .item .label,
.item.usageYarn .item .attributes .item .value {
    width: 100%;
    margin-right: 1rem;
}

.item.usageYarn .item .attributes .item .value {
    margin-bottom: 8px;
}

.list.colorYarn {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0 -2.5% 4rem -2.5%;
    width: 105%;
}

.list.colorYarn .item.color {
    margin: 0 2.5%;
    text-align: center;
    width: 20%;
}

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

.list.colorYarn .item.color .number {
    width: 100%;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    font-weight: 400;
}

.list.colorYarn .item.color .image {
    position: relative;
    cursor: pointer;
}

.list.colorYarn .item.color .text {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 1rem;
    text-align: center;
}

.list.colorYarn .item.color .text .ball,
.list.colorYarn .item.color .text .weight {
    width: 75%;
    margin: 0 auto;
}

.list.colorYarn .item.color .text .ball {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    margin: 0 auto 15px auto;
    padding-bottom: 10px;
}

.list.colorYarn .item.color .text .ball img,
.list.colorYarn .item.color .text .weight img {
    opacity: 0.8;
    margin: 0 auto;
    padding-bottom: 5px;
    width: 80%;
}

.list.colorYarn .item.color .text .weight img {
    width: 70%;
}

.list.colorYarn .item.color .link.changecolor {
    font-size: 0.9rem;
    font-weight: 400;
}

.list.colorYarn .item.color .link.changecolor:before {
    content: '\f044';
    font-family: fontawesome;
    display: inline-block;
    margin-right: 5px;
}

.needleTable {
    text-align: left;
    font-size: 0.9rem;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.needleTable .row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
    align-items: flex-end;
}

.needleTable .row br {
    display: none;
}

.needleTable .row img {
    width: 40px;
}

.needleTable .row .cell-1 {
    width: 30%;
}

.needleTable .row .cell-2,
.needleTable .row .cell-3,
.needleTable .row .cell-4 {
    width: 10%;
    text-align: center;
}

.allText {
    width: 100%;
    font-size: 0.9rem;
    margin: 15px 0;
}

.allText li {
    margin: 4px 0;
}

.allText li:before {
    font-family: fontawesome;
    content: '\f105';
    display: inline-block;
    margin-right: 10px;
}


/* Mehr laden */

.load-more-items {
    width: 100%;
    text-align: center;
    margin: 20px 0;
    padding-top: 25px;
    border-top: 1px solid #eee;
}

.load-more-items button {
    border: none;
    background: black;
    padding: 10px 20px;
    color: white;
    font-family: 'futura-pt';
    font-weight: 300;
    text-transform: uppercase;
    font-size: 1.25rem;
    letter-spacing: 0.2px;
}

.load-more-items button:before {
    font-family: fontawesome;
    content: '\f078';
}

.load-more-items button:hover {
    background: #999;
    transition: all 0.5s ease-out;
    animation: bounce 1s ease-out;
}

.zoomContainer {
    z-index: 999;
}


/* Materialliste Layer alternative Farben */

#containerColors {
    position: fixed;
    top: 12%;
    left: 27%;
    width: 43.5%;
    z-index: 10000000000;
    background-color: #FFF;
    max-height: 72%;
    overflow: auto;
    box-shadow: 0px 0px 3px;
    padding: 2rem;
}

#originalColor {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

#originalColor .item {
    margin-right: 2rem;
    width: 200px;
}

#showAlternateColors {
    width: 100%;
    margin: 0 -2%;
    display: flex;
    flex-wrap: wrap;
}

#showAlternateColors .item {
    margin: 1rem 2% 1rem 2%;
    width: 12.666%;
    cursor: pointer;
}

#showAlternateColors .item:hover {
    transform: scale(1.1);
    transition: all 0.5s ease-out;
}

.link.close {
    font-family: var(--main-font-fontawesome);
    font-weight: 100;
    color: black;
    text-align: right;
    font-size: 2.5rem;
    position: absolute;
    right: 2rem;
}


/* Strickanleitung kaufen */

.layerDetailTemplate .attributes .item form {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.layerDetailTemplate .attributes .item .buyPattern {
    font-size: 1.4rem;
    color: white;
    background: black;
    font-weight: 300;
    font-family: var(--main-font-buttonFont);
    padding: 5px 10px;
    width: 100%;
}

.layerDetailTemplate .attributes .item .buyPattern:hover {
    animation: bounce 1s infinite;
}


/* Detail Garne API */

.layerDetailTemplate.API .list .item.left {
    width: 30%;
    position: relative;
}

.layerDetailTemplate.API .list .item.left .flag {
    left: 0;
    right: unset;
}

.layerDetailTemplate.API .article-image .image {
    max-width: 550px;
    height: auto;
    max-height: 605px;
}

.layerDetailTemplate.API .list .item.right {
    width: 60%;
}

.layerDetailTemplate.API .attributes {
    margin: 20px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 1rem;
}

.layerDetailTemplate.API .attributes .item {
    margin-bottom: 15px;
}

.layerDetailTemplate.API .article {
    width: 95%;
}

.layerDetailTemplate.API .article .item .number {
    width: 100%;
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
}

.layerDetailTemplate.API .articleLink,
.layerDetailTemplate.API .item.right .articleLink {
    border-top: none;
    margin: 1.5rem 0 0 0;
    padding-top: 0;
    width: 100%!important;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

@media only screen and (max-width: 1575px) {
    .layerDetailTemplate .attributes .item,
    .layerDetailTemplate .attributes .item:nth-child(even) {
        width: 100%;
    }
}

@media only screen and (max-width: 1350px) {
    .layerDetailTemplate .article-image-small .image-list #item360:before {
        font-size: 1.3rem;
    }
    .layerDetailTemplate .article-image-small .image-list.model .item,
    .layerDetailTemplate .article-image-small .image-list.model .item.video {
        width: 28.333%;
    }
    .layerDetailTemplate .article-image .image {
        max-width: unset;
        width: 100%;
        height: auto;
    }
}

@media only screen and (max-width: 1150px) {
    .item.usageYarn .item .attributes {
        margin: 20px 0;
        font-size: 0.9rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: baseline;
    }
}

@media only screen and (max-width: 1050px) {
    .layerDetailTemplate .list {
        display: flex;
        flex-wrap: wrap;
    }
    .layerDetailTemplate .list .item.left,
    .layerDetailTemplate .list .item.right,
    .layerDetailTemplate.API .list .item.left,
    .layerDetailTemplate.API .list .item.right {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        flex-direction: row;
    }
    .layerDetailTemplate .list .item.right {
        margin-top: 35px;
    }
    .layerDetailTemplate .attributes .item {
        width: 55%;
    }
    .layerDetailTemplate .attributes .item:nth-child(even) {
        width: 43%;
    }
    .layerDetailTemplate .article-image-small .image-list .item {
        height: 14vw;
        line-height: 14vw;
    }
    .layerDetailTemplate .list .item.right .head {
        order: 3;
    }
    .layerDetailTemplate .list .item.right .content {
        order: 4;
    }
    .layerDetailTemplate .list .item.right .article-image-small {
        order: 1;
    }
    .layerDetailTemplate .list .item.right .article {
        order: 2;
        margin-bottom: 30px;
        border-bottom: 1px solid #eee;
        padding-bottom: 20px;
    }
    .layerDetailTemplate .list .item.right .articleLink {
        order: 6;
    }
    .layerDetailTemplate .list .item.right .attributes {
        order: 6;
    }
    .layerDetailTemplate .list .item.right .yarnList {
        order: 7;
    }
    .list.colorYarn .item.color {
        width: 15%;
    }
    .layerDetailTemplate .article-image-small .image-list.model .item,
    .layerDetailTemplate .article-image-small .image-list.model .item.video {
        width: 15%;
    }
    #containerColors {
        position: fixed;
        top: 12%;
        left: 2.5%;
        width: 95%;
        z-index: 10000000000;
        background-color: #FFF;
        max-height: 72%;
        overflow: auto;
        box-shadow: 0px 0px 3px;
        padding: 2rem;
    }
    .layerDetailTemplate.API .article .item .number {
        font-size: 0.9rem;
    }
    .layerDetailTemplate .list .item.left .article-image.publication {
        text-align: left;
    }
}

@media only screen and (max-width: 780px) {
    .layerDetailTemplate .attributes .item,
    .layerDetailTemplate .attributes .item:nth-child(even) {
        width: 100%;
    }
    .iframe iframe {
        height: 500px!important;
    }
    .list.colorYarn .item.color {
        width: 20%;
    }
    .article-image .image {
        width: 100%;
        display: block;
        height: auto!important;
    }
    .layerDetailTemplate .list .item.left .article-image video {
        width: 100%!important;
        height: auto!important;
    }
    .layerDetailTemplate .article-image-small .image-list.model .item,
    .layerDetailTemplate .article-image-small .image-list.model .item.video {
        width: 20%;
    }
    #showAlternateColors .item {
        width: 21%;
    }
    .needleTable .row {
        justify-content: space-between;
    }
}

@media only screen and (max-width: 550px) {
    .layerDetailTemplate .attributes .item .label,
    .layerDetailTemplate .attributes .item .value {
        width: 100%;
    }
    .layerDetailTemplate .buttonClose {
        font-size: 1.5rem;
        height: 40px;
        width: 60px;
    }
    .layerDetailTemplate .buttonClose .icon {
        line-height: 2.75rem;
    }
    .list.colorYarn .item.color {
        width: 28.333%;
    }
    .layerDetailTemplate .article-image-small .image-list.model .item,
    .layerDetailTemplate .article-image-small .image-list.model .item.video {
        width: 28.333%;
    }
    #showAlternateColors .item {
        width: 29.333%;
    }
    .layerDetailTemplate .article .list .item {
        width: 28.333%;
    }
    .layerDetailTemplate .list .item.left .article-image.publication img {
        max-width: 100%;
    }
}

@media only screen and (max-width: 400px) {
    .iframe iframe {
        height: 300px!important;
    }
    .list.colorYarn .item.color {
        width: 45%;
    }
    .layerDetailTemplate .article-image-small .image-list.model .item,
    .layerDetailTemplate .article-image-small .image-list.model .item.video {
        width: 45%;
    }
    #showAlternateColors .item {
        width: 46%;
    }
}