/**
 * categories list for averticement
 * first used on Front-page
*/

.cats-ad .unit{
    position: relative;
    box-sizing: border-box;
    background-clip: content-box;
    background-position: 50% 50%;
    background-size: cover;
}
.cats-ad a{
    display:block;
    height: 100%;
    opacity: .99;
}
.cats-ad .title{
    font-weight: 700;
    font-size: 1.25rem;
    color:#009d4a;
    text-transform: uppercase;
    display: inline-block;
    text-align: center;
    padding:.7em 3em;
    margin: 6%;
    box-sizing: border-box;
    background-color: rgba(255,255,255,.9);
}
@media (min-width: 769px){
    .cats-ad .rcstuioxcpxr{
        min-height: 40vw;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .cats-ad .ixtjjrfjwis{
        width:32%;
    }
    .cats-ad .second{
        width:41%;
        padding: 0;
    }
    .cats-ad .third{
        width:27%;
    }

    /**/
    .cats-ad .ixtjjrfjwis .unit{
        height: 100%;
    }
    .cats-ad .second .unit:first-child,
    .cats-ad .third .unit:last-child{
        height: calc(60% - 7.5px);
    }
    .cats-ad .second .unit:last-child,
    .cats-ad .third .unit:first-child{
        height: calc(40% - 7.5px);;
    }
}
@media (max-width: 1200px){
    .cats-ad .title{
        padding: 5px;
        margin: 10px;
        width:calc(100% - 20px);
    }
}
@media (max-width: 768px){
    .cats-ad .rcstuioxcpxr{
        width:100%;
    }
    .cats-ad .unit{
        padding-bottom: 15px;
        max-width: 400px;
        margin: auto;
    }
    .cats-ad .ixtjjrfjwis .unit{
        height:400px;
    }
    .cats-ad .second .unit:first-child,
    .cats-ad .third .unit:last-child{
        height:250px;
    }
    .cats-ad .second .unit:last-child,
    .cats-ad .third .unit:first-child{
        height: 150px
    }

    .cats-ad .title{
        width:auto;
    }
}

/*
 * hover effects
*/
@media (min-width: 992px){
    .cats-ad .unit:before{
        content:'';
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        border:4px solid transparent;
        box-sizing: border-box;
        transition-property: top, left, width, height, border-color, background-color;
        transition-duration: .3s;
    }
    .cats-ad .unit:hover:before{
        top:10px;
        left:10px;
        height:calc(100% - 20px);
        width:calc(100% - 20px);
        border-color:#009d4a;
        background-color:rgba(255,255,255,.2);
    }
    .cats-ad .title{
        transition-property: background-color, color;
        transition-duration: .3s;
    }
    .cats-ad .unit:hover .title{
        background-color: #009d4a;
        color:white;
    }
}

/**
 * mobile
*/
.cats-ad_mobile{}
.cats-ad_mobile .row{
    justify-content: center;
}
.cats-ad_mobile .unit{
    width:165px;
    max-width: 50%;
    padding:5px;
    margin: 0;
}
.cats-ad_mobile a{
    display: flex;
    flex-direction: column;
}
.cats-ad_mobile .title{
    font-size: 1rem;
    color:inherit;
    width:100%;
    margin: 0;
    background-color: #faf9f6;

    min-height: 3em;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cats-ad_mobile .unit:not(.shop) .title{
    text-transform: unset;
}

.cats-ad_mobile .shop a{
    color:#009d4a;
    border:3px solid;
    box-sizing: border-box;
}
@media (max-width: 360px){
    .cats-ad_mobile .unit{
        width:50%;
    }
}