/*
    Блок одежды для погоды
 */

.clothes-block {
    position: relative;
    margin: 70px 160px 0;
}
.main-block + .clothes-block {
    margin-top: 0;
}
.clothes-type {
    color: #60397B;
    font: 600 45px/1.2 "Montserrat SemiBold", sans-serif;
    margin-top: 36px;
}

.clothes-content {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.look-text {
    font: 300 18px/1.2 "Montserrat Light", sans-serif;
    color: #60397B;
    width: 490px;
    padding-top: 34px;
}
.buy-button {
    display: inline-block;
    border: 1px solid black;
    padding: 22px 55px;
    margin: 0 30px;
    font: 500 18px/1.2 "Montserrat Medium", sans-serif;
}
.week-title {
    text-align: center;
    font: 700 52px/1.1 "Athelas Bold", sans-serif;
}

/* Обработка одежды */

.dress {
    width: 333px;
}
.dress-box {
    position: relative;
}
.point {
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 9px;
    border: 3px solid #FF3729;
    box-sizing: border-box;
}
.dress-description {
    margin-top: 30px;
    width: 700px;
    text-align: center;
    font: 400 18px/1.2 "Montserrat", sans-serif;
}
.clothes-content:not(.slick-active) > .dress-description {
    display: none;
}
.slick-current > .dress-box > .point, .slick-active:not(.slick-current) + .slick-active > .dress-box > .point {
    display: none;
}

.slick-current, .slick-active:not(.slick-current) ~ .slick-active {
    opacity: 0.2;
}
.slick-current > .dress-description, .slick-active:not(.slick-current) ~ .slick-active > .dress-description {
    display: none;
}
@media screen and (min-width: 1400px) and (max-width: 1500px) {

}

@media screen and (min-width: 1200px) and (max-width: 1400px) {

}

@media screen and (min-width: 992px) and (max-width: 1200px) {
    .clothes-block {
        margin: 50px 80px 0;
    }
    .look-text {
        font: 300 16px/1.2 "Montserrat Light", sans-serif;
        padding-right: 40px;
        padding-top: 20px;
    }
    .clothes-type {
        font: 600 36px/1.2 "Montserrat SemiBold", sans-serif;
    }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
    .clothes-content {
        flex-direction: column;
    }
    .clothes-type {
        margin-top: 20px;
    }
    .look-text {
        padding-top: 20px;
    }
    .clothes-block {
             margin: 50px 40px 0;
 }
    .dress {
        width: 220px;
    }
}

@media screen and (min-width: 540px) and (max-width: 768px) {
    .clothes-content {
        flex-direction: column;
    }
    .buy-button {
        display: block;
        padding: 18px 25px;
        text-align: center;
    }
    .clothes-type {
        font: 600 40px/1.2 "Montserrat SemiBold", sans-serif;
    }
    .look-text {
        width: auto;
    }
    .clothes-block {
        margin: 70px 60px 0;
    }
    .slick-active:not(.slick-current) > .dress-box > .point {
        display: none;
    }
    .slick-current > .dress-box > .point {
        display: block;
    }
    .slick-current {
        opacity: 1;
    }
    .slick-active:not(.slick-current) {
        opacity: 0.2;
    }
    .slick-current > .dress-description {
        display: block;
    }
    .slick-active:not(.slick-current) > .dress-description {
        display: none;
    }
    .dress-description {
        width: 500px;
    }
}

@media screen and (max-width: 540px) {
    .clothes-content {
        flex-direction: column;
    }
    .buy-button {
        font: 500 14px/1.2 "Montserrat Medium", sans-serif;
        display: block;
        padding: 17px 37px;
        text-align: center;
    }
    .clothes-type {
        margin-top: 17px;
        font: 600 25px/1.2 "Montserrat SemiBold", sans-serif;
    }
    .look-text {
        padding-top: 13px;
        width: auto;
        font: 300 14px/1.2 "Montserrat Light", sans-serif;
    }
    .clothes-block {
        margin: 40px 20px 0;
    }
    .slick-active:not(.slick-current) > .dress-box > .point {
        display: none;
    }
    .slick-current > .dress-box > .point {
        display: block;
    }
    .slick-current {
        opacity: 1;
    }
    .slick-active:not(.slick-current) {
        opacity: 0.2;
    }
    .slick-current > .dress-description {
        display: block;
    }
    .slick-active:not(.slick-current) > .dress-description {
        display: none;
    }
    .dress-description {
        width: 300px;
        font: 400 14px/1.2 "Montserrat", sans-serif;
        margin-top: 15px;
    }
    .week-title {
        text-align: center;
        font: 700 30px/1.1 "Athelas Bold", sans-serif;
    }
    .weather-links > a > img {
        width: 52px;
    }
}


/* Стрелки */
.slick-arrow {
    width: 36px;
    height: 60px;
    position: absolute;
    top: 167px;
    z-index: 1;
    background-size: 100% 100%;
}

.slick-prev {
    background-image: url("../images/left-arrow.png");
    background-repeat: no-repeat;
    left: 30%;
}
.slick-next {
    background-image: url("../images/right-arrow.png");
    background-repeat: no-repeat;
    right: 30%;
}
/* Конец стрелок */


.point:hover {
    background: #FF3729;
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
    .point {
        border-radius: 7px;
        width: 13px;
        height: 13px;
    }
    .dress {
        width: 300px;
    }
    .slick-arrow {
        width: 30px;
    }
    .slick-prev {
        left: 32%;
    }
    .slick-next {
        right: 32%;
    }
}
@media screen and (min-width: 768px) and (max-width: 992px) {
    .slick-arrow {
        width: 26px;
        top: 100px;
    }
    .slick-prev {
        left: 27%;
    }
    .slick-next {
        right: 27%;
    }
    .price-block {
        right: -26px !important;
    }
}

@media screen and (min-width: 540px) and (max-width: 768px) {
    .dress {
        width: 350px;
    }
    .slick-prev {
        left: 15%;
    }
    .slick-next {
        right: 15%;
    }
    .weather-links > a > img {
        width: 59px;
    }
}

@media screen and (max-width: 540px) {
    .dress {
        width: 300px;
    }
    .point {
        border: 2px solid #FF3729;
    }
    .slick-arrow {
        width: 20px;
        top: 150px;
    }
    .slick-prev {
        left: 5%;
    }
    .slick-next {
        right: 5%;
    }
}

/* Панель с погодой на неделю */
.week-weather {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 12px auto 20px;
    padding: 0 40px;
}
.day-weather-block {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}
.day {
    color: #939cb0;
}
.dayof {
    color: #f66049;
}
.day, .dayof {
    font: 400 13px/1.2 "YS Text", sans-serif;
}
.day-weather-desc {
    display: flex;
    margin-top: 4px;
    align-items: center;
}
.day-weather-info {
    margin-left: 10px;
}
.day-weather-info > p:first-child {
    font: 500 16px/1.2 "YS Text Bold", sans-serif;
}
.day-weather-info > p:nth-child(2) {
    color: #939cb0;
    font: 400 14px/1.2 "YS Text", sans-serif;
}

.day-weather-desc > img {
    width: 44px;
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
}
@media screen and (min-width: 768px) and (max-width: 992px) {
    .week-weather {
        margin: 0 20px 40px;
        padding-top: 40px;
    }
    .day-weather-desc > img {
        width: 45px;
    }
    .day-weather-info > p:first-child {
        font: 500 16px/1.2 "YS Text Bold", sans-serif;
    }
    .day-weather-info > p:nth-child(2) {
        color: #939cb0;
        font: 400 14px/1.2 "YS Text", sans-serif;
    }
    .day, .dayof {
        font: 400 12px/1.2 "YS Text", sans-serif;
    }
}
@media screen and (min-width: 540px) and (max-width: 768px) {
    .week-weather {
        margin: 0 auto 40px;
        padding: 40px 0 0;
        width: 500px;
    }
    .day-weather-desc > img {
        width: 45px;
    }
    .day-weather-block {
        margin-right: 50px;
    }
    .day-weather-info > p:first-child {
        font: 500 18px/1.2 "YS Text Bold", sans-serif;
    }
    .day-weather-info > p:nth-child(2) {
        color: #939cb0;
        font: 400 16px/1.2 "YS Text", sans-serif;
    }
    .day, .dayof {
        font: 400 13px/1.2 "YS Text", sans-serif;
    }
}
@media screen and (max-width: 540px) {
    .weather-links {
        flex-direction: row !important;
    }
    .week-weather {
        margin: 0 auto 10px;
        padding-top: 20px;
        width: auto;
    }
    .day-weather-desc > img {
        width: 35px;
    }
    .day-weather-block {
        margin-right: 30px;
    }
    .day-weather-info > p:first-child {
        font: 500 14px/1.2 "YS Text Bold", sans-serif;
    }
    .day-weather-info > p:nth-child(2) {
        color: #939cb0;
        font: 400 12px/1.2 "YS Text", sans-serif;
    }
    .day, .dayof {
        font: 400 13px/1.2 "YS Text", sans-serif;
    }
}

.weather-links {
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

/* Цена */
.price-block {
    z-index: 10;
    display: none;
    position: absolute;
    top: 0;
    right: -188px;
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    box-sizing: border-box;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, .25);
}

@media screen and (min-width: 540px) and (max-width: 768px) {
    .price-block {
        top: 15px;
        right: -62px;
    }
}
@media screen and (max-width: 540px) {
    .price-block {
        top: auto;
        bottom: 123px;
        right: 16px;
    }
}
.price-block > img {
    margin: 10px 0 0 10px;
}
.good-name {
    font: 700 25px/1.2 "Athelas Bold", sans-serif;
    padding: 0 33px;
    text-align: center;
}
.good-price {
    font: 400 22px/1.2 "Montserrat", sans-serif;
    padding: 6px 40px 20px;
    text-align: center;
    color: #000000;
}