//Helpers
.text-center {
    text-align: center;
}
//Category
.entry{
    &-category{
        line-height: 1.2;
        display: inline-flex;
        flex-wrap: wrap;
        a{
            font-size: 1.2rem;
            text-transform: uppercase;
            line-height: 1.2;
            margin-right: 10px;
            margin-bottom: 2px;
            color: var(--color-acc);
            display: inline-flex;
            align-items: center;
            @extend %animation-color;
            &:hover{
                color: var(--color-txt);
            }
        }

        &-small{
            a{
                font-size: 1.2rem;
            }
        }
    }

    &-meta{
        font-size: 1.2rem;
        line-height: 1.2;
        text-transform: uppercase;
        @include mq('lg') {
            line-height: 1.4;
        }
        span,
        a{
            font-size: 1.2rem;
            line-height: 1.2;
            @include mq('lg') {
                line-height: 1.4;
            }
            @extend %animation-color;
            color: var(--color-txt-05);

        }
        a:hover{
            color: var(--color-txt);
        }
        > span{
            margin-right: 10px;
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            &:after{
                content:"";
                display: inline-flex;
                height: 16px;
                width: 1px;
                background: var(--color-txt-025);
                margin-left: 10px;
            }
            &:last-child{
                margin-right: 0;
                &:after{
                    display: none;
                }
            }
        }

        &-small{
            font-size: 1.2rem;
            line-height: 1.2;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            @include mq('lg') {
                line-height: 1.4;
            }       
            span,
            a{
                font-size: 1.2rem;
                line-height: 1.2;
                display: inline-flex;
                align-items: center;
                @include mq('lg') {
                    line-height: 1.4;
                }   
            }
            > span{
                margin-right: 7px;
                &:after{
                    height: 14px;
                    margin-left: 10px;
                }
            }
        }

    }

}
.meta-item.meta-category a + a{
    margin-left: 8px;
}

//Entry Title
.entry-title a{
    display: block;
    @extend %animation-color;
    &:hover{
        color: var(--color-acc);
    }
}


//Entry Media
.entry-media a{
    display: block;
    pointer-events: auto;
}
.entry-media a:not(.roogan-button-play){
    overflow: hidden;
}
.entry-media{
    position: relative;
    z-index: 2;
}
.entry-media img{
    border-radius: 4px;
    position: relative;
    z-index: 2;
    width: 100%;
    object-fit: cover;
    @include mq('md') {
        border-radius: 6px;  
    }
    @include mq('lg') {
        border-radius: 8px;  
    }
}
.entry-media{
    a,
    img,
    .roogan-overlay-bg-full:after,
    .roogan-overlay-bg-bottom:after{
        border-radius: 4px;
        @include mq('md') {
            border-radius: 6px;  
        }
        @include mq('lg') {
            border-radius: 8px;  
        }  
    }
}
.entry-media-br-0 {
    a,
    img,
    .roogan-overlay-bg-full:after,
    .roogan-overlay-bg-bottom:after{
        border-radius: 0;   
    }
}
.entry-media-br-6{
    a,
    img,
    .roogan-overlay-bg-full:after,
    .roogan-overlay-bg-bottom:after{
        border-radius: 4px; 
        @include mq('md') {
            border-radius: 6px;  
        }
        @include mq('lg') {
            border-radius: 6px;  
        }  
    }
}
.entry-media-br-4 {
    a,
    img,
    .roogan-overlay-bg-full:after,
    .roogan-overlay-bg-bottom:after{
        border-radius: 4px; 
        @include mq('md') {
            border-radius: 4px;  
        }
        @include mq('lg') {
            border-radius: 4px;  
        }  
    }
}
.entry--media-shadow:after{
    content: "";
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,.1);
    z-index: 0;
    pointer-events: none;
    position: absolute;
    bottom: -80px;
    right: -120px;

    border-radius: 4px;
    @include mq('md') {
        border-radius: 6px;  
    }
    @include mq('lg') {
        border-radius: 8px;  
    }  

}
.entry-media-full{
    img{
        width: 100%;
        object-fit: cover;

    }
    a,
    img{
        border-radius: 0 !important;
    }
}
.entry-media a img,
.meks-instagram-widget div > a img{
    transition: transform .2s ease-in-out;
    will-change: transform;
    filter: blur(0);
}
.entry-media:hover a img,
.meks-instagram-widget div > a:hover img,
.roogan-post .roogan-overlay:hover .entry-media a img{    
    transform: scale(1.1);
}
.meks-instagram-widget div > a:hover img{
    opacity: 1;
}
.meks-instagram-widget div > a{
    border-radius: 4px;
}
.layout-fa-5 .entry-media:hover a img,
.layout-fa-6 .entry-media:hover a img{
    transform: scale(1);   
}

//Separator
.separator-line{
    width: 25px;
    height: 1px;
    display: block;
    background-color: var(--color-txt-025);
    &.large{
        margin: 40px 0 50px;
    }
    &.medium{
        margin: 30px 0 40px; 
    }
    &.small{
        margin: 25px 0 30px; 
    }
    &.full{
        width: 100%;
        background-color: var(--color-txt-01);
    }
}
.roogan-items .col-12:last-child .roogan-post-layout-g .separator-line{
    display: none;
}


.roogan-link-special{
    color: var(--color-acc);
    display: inline-flex;
    align-items: center;
    font-family: var(--h-font);
    font-size: 1.4rem;
    @extend %animation-color;
    &:hover{
        color: var(--color-txt);      
    }
    .rf{
        font-size: 2rem;
        line-height: 1;
    }
}
.roogan-shows-list{
    .roogan-show-item{
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        @include mq('md') {
            margin-bottom: 20px;
        }

        @include mq('xl') {
            margin-bottom: 25px;
        }

        &:last-child{
            margin-bottom: 0;
        }
    }
    .entry-media{
        max-width: 60px;
        flex: 0 0 60px;
        margin-right: 20px;
    }

    
}
.roogan-posts .col-12:last-child .roogan-post-layout-g .roogan-section-separator{
    display: none;
}
.roogan-post-layout-d:not(.has-post-thumbnail) .roogan-shows-list .roogan-overlay,
.roogan-post-layout-c:not(.has-post-thumbnail) .roogan-shows-list .roogan-overlay,
.roogan-post-layout-a:not(.has-post-thumbnail) .roogan-shows-list .roogan-overlay,
.roogan-post-layout-b:not(.has-post-thumbnail) .roogan-shows-list .roogan-overlay{
    min-height: initial;
}

.roogan-post-layout-g{
    .roogan-shows-list{
        .entry-media{

            margin-left: 25px;
        }  
        .roogan-show-episode-header{
            padding-right: 60px;
        }
    }
}

.roogan-post-layout-c{
    .roogan-shows-list .roogan-show-item{
        align-items: flex-start;
    }
}


//Play Buttons
a.roogan-button-play{
    display: inline-flex;
    align-items: center;
}
.roogan-button-play{

    color: #293036;
    i{
        background-color: #FFFFFF;
        box-shadow: 0 5px 10px 0 rgba(0,0,0,0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        

        color: #293036;
        transition: all .15s ease-in-out;
        

        + span{
            margin-left: 15px;
        }
    }

    &-acc{
        i{
            background-color: var(--color-acc);
            color: #FFF;
        }
    }

    span{
        font-family: var(--button-font);
        font-weight: var( --button-font-weight);
        color: var(--color-txt);
        font-size: 1.6rem;
        @include mq('md') {
            font-size: 1.8rem;
        }
        transition: all .15s ease-in-out;
    }
    &:hover{
        span{
            opacity: .8;
        }
    }   
    &:hover i{
        transform: scale(1.1);
    }

}
.roogan-button-play-large{
    i{
        height: 40px;
        width: 40px;
        font-size: 2.4rem;

        @include mq('md') {
            height: 60px;
            width: 60px; 
            font-size: 3.3rem;      
        }

        @include mq('lg') {
            height: 80px;
            width: 80px;
            font-size: 4.4rem;      
        }

        + span{
            margin-left: 15px;
        }
        &.rf-play:before{
            margin-right: -2px;
            @include mq('lg') {
                margin-right: -3px;     
            }
        }
    }
}

.roogan-button-play-medium{
    i{
        height: 40px;
        width: 40px;
        font-size: 2.4rem;

        @include mq('sm') {
            height: 50px;
            width: 50px; 
            font-size: 3rem;      
        }
        @include mq('lg') {
            height: 60px;
            width: 60px; 
            font-size: 3.4rem;      
        }
        + span{
            margin-left: 10px;
            font-size: 1.2rem;
            @include mq('sm') {
                margin-left: 12px;
                font-size: 1.2rem;
            }

            @include mq('md') {
                margin-left: 15px;
                font-size: 1.4rem;
            }
        }
        &.rf-play:before{
            margin-right: -2px;
            @include mq('md') {
                margin-right: -3px;     
            }
        }
    }
}

.roogan-button-play-small{
    i{
        height: 40px;
        width: 40px;
        font-size: 2.4rem;
        + span{
            margin-left: 15px;
        }
        &.rf-play:before{
            margin-right: -2px;
        }
    }
}
.roogan-button-play-txt{
    left: 0;
    height: 100%;
    width: 100%;
    justify-content: center;
    @extend %animation-main;
    i{
        background: transparent;
        box-shadow: none;
        color: #FFF;
        transform: scale(0);
        font-size: 3rem;
    }
   &:hover,
   &.roogan-is-playing{
        background: rgba(0,0,0,0.5);
        i{
            transform: scale(1);
        }
    }
    &.button-disabled{
        background: rgba(0,0,0,0.75);
        i{
            transform: scale(1);
        }       
    }
}
.entry-media{
    .roogan-button-play{
        position: absolute;
        z-index: 3;
        &-large{
            left: 20px;
            bottom: 20px;  
            @include mq('md') {
                left: 30px;
                bottom: 30px;
            }
            @include mq('lg') {
                left: 50px;
                bottom: 50px;
            }
        }
        &-medium{
            left: 20px;
            bottom: 20px;  
            @include mq('md') {
                left: 30px;
                bottom: 30px;
            }
            &.pos--top{
                bottom: auto;
                top: 30px;
                left: 30px;
                @include mq('md') {
                    top: 30px;
                    left: 30px;
                }
                @include mq('lg') {
                    top: 40px;
                    left: 40px;
                }
            }
            &-pos--bottom{
                left:20px;
                bottom: 20px;

                @include mq('md') {
                    left:30px;
                    bottom: 30px;
                }
            }
        }
        &-small{
            left: 20px;
            bottom: 20px;   
            @include mq('md') {
                left: 30px;
                bottom: 30px;
            }
            &.pos--top{
                bottom: auto;
                top: 30px;
            }        
            &-pos--bottom{
                left:20px;
                bottom: 20px;
                @include mq('md') {
                    left:20px;
                    bottom: 20px;
                }
            }
        }
    }
    figure{
        border-radius: 4px; 
        @include mq('md') {
            border-radius: 6px;  
        }
        @include mq('lg') {
            border-radius: 8px;  
        }
        overflow: hidden;
    }

}
.roogan-overlay-bg-bottom{
    .roogan-button-play{
        position: absolute;
        z-index: 3;
        right: 0;
        i{
            margin-right: 0;
        }
    }    
}
.subscribe-in-overlay{
    min-height: 121px;
    .roogan-button-play{
        right: auto;
    }
    .roogan-subscribe-single{
        position: absolute;
        right: 30px;
        z-index: 10;
        bottom: 40px;
    }
}

//Custom offset
.offset-custom{
    margin-left: 2.5%;
}
.author-archive .author-avatar{
   float: left;
}
.author-archive .mb--sm{
    padding-top: 12px;
}
.author-list a{
    @extend %animation-main;
}
.author-list a:hover{
    color: var(--color-acc);
}
.author-list .section-subnav a:hover {
    color: var(--color-bg);
}
.search-results,
.search-no-results{
    .section-description p{
        margin-bottom: 10px;
    }
    .section-description .search-form{
        display: flex;
    }
    .section-description .search-form button[type="submit"]{
        height: 45px;
        flex: 0 0 140px;
        margin-left: 20px;
    }
}
//Slider arrows offset
.roogan-slider.has-arrows{
    .owl-nav{
        position: absolute;

        width: 100%;
        padding: 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); 
        display: flex;
        justify-content: space-between;  
        pointer-events: none;
        
        max-width: 100%;


        @include mq('xl') {
            max-width: size-by-col(12, 'xl');
        }
        > div{
            pointer-events: auto;
            transition: all .15s ease-in-out;
        }  

        a{
            transition: opacity .15s ease-in-out;
            opacity: 0.5;
            color: #333;
            &:hover{
                opacity: 1;
            }
            i{
                color: #333;
            }
        } 
    }
    .roogan-button-circle .rf{
        font-size: 3.4rem;
    }
    .owl-prev{
        margin-left: -14px;
    }
    .owl-next{
        margin-right: -14px;
    }
    .roogan-button-circle:after{
        background: #FFF;
        transform: scale(1);
    }
}
.layout-fa-2 .roogan-slider.has-arrows{   
        .owl-prev{
            margin-left: 20px;
            @include mq('md') {
                margin-left: 20px;
            }
            @include mq('lg') {
                margin-left: -40px;
            }
            @include mq('xl') {
                margin-left: -60px;
            }
        }
        .owl-next{
            margin-right: 20px;
            @include mq('md') {
                margin-right: 20px;
            }
            @include mq('lg') {
                margin-right: -40px;
            }
            @include mq('xl') {
                margin-right: -60px;
            }
        } 

        .roogan-button-circle:after{
            background: var(--color-txt-05);
        }
        .owl-nav a i{
            color: var(--color-bg);
        }

}
.layout-fa-4 .roogan-slider.has-arrows{
    .owl-prev{
        margin-left: -60px;
    }
    .owl-next{
        margin-right: -60px;
    }   
}
.owl-item{
    .entry-title,
    .entry-title a,
    .entry-meta a,
    .entry-category a,
    .entry-media,
    .roogan-button-play a,
    .entry-header,
    .entry-media:before,
    .entry-media:after,
    .entry-media img,
    .roogan-button-play,
    .roogan-button-play i{
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
}


.owl-item .roogan-section{
    margin-bottom: 0 !important;
}
.roogan-button-circle.prev{
    margin-right: 3px;
}
.roogan-slider-nav{
    .rf{
        font-size: 3.4rem;
    }
}
.roogan-empty-message{
    padding: 30px;
    margin-top: 20px;
    @extend %vertical-margin;
    a{
        text-decoration: underline;
        &:hover{
            text-decoration: none;
        }
    }
}
.roogan-instagram-section .meks-instagram-widget{
    display: grid;
    grid-column-gap: 20px;
    grid-template-columns: auto auto auto;
    @include mq('md') {
        grid-column-gap: 30px;
        grid-template-columns: auto auto auto auto;
    }
    @include mq('lg') {
        grid-column-gap: 50px;
        grid-template-columns: auto auto auto auto auto auto;
    }
    
}
.roogan-instagram-section .meks-instagram-widget > div,
.roogan-instagram-section{
    @extend %vertical-margin;   

}
.roogan-section-search{
    .search-form{
        display: flex;
        button[type="submit"]{
            margin-left: 20px;
            height: 45px;
            i{
                display: none;
            }
        }
    }
}
.roogan-breadcrumbs,
.roogan-breadcrumbs a{
    font-size: 1.4rem;
}
.search-results .page .entry-meta {
    display: none;
}


//Orders


.roogan-order-3 {
    order: 3;
    @include mq('lg') {
        order: initial;
    }
}

.roogan-order-1 + .roogan-order-2{
    margin-top: 0;
    @include mq('sm') {
        margin-top: 0;
    }
    @include mq('md') {
        margin-top: 0;
    }
    @include mq('lg') {
        margin-top: 0;
    }
}
.roogan-order-2 + .roogan-order-1{
    margin-bottom: 10px;
    @include mq('sm') {
        margin-top: 10px;
    }
    @include mq('md') {
        margin-bottom: get-gutter-width('md');
    }
    @include mq('lg') {
        margin-bottom: 0;
        margin-top: 0;
    }    
}
.roogan-order-2 {
    order: 2;
    @include mq('lg') {
        order: initial;
    }
}
.roogan-sidebar {
    display: block;
}


.error404 .entry-media-full img{
    height: 500px;
}
.entry-title,
.entry-title a{
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}
.roogan-show-episode-header .entry-title a{
    overflow-wrap: anywhere;
}
.h-auto{
    width: 100%;
}
.section-subnav{
    .roogan-button {
        margin-right: 5px;
        max-width: 40px;
    }
    .roogan-button i {
        margin-right: 0;
    }
}
.roogan-is-podcast .entry-category a:first-child:before,
.roogan-is-podcast .meta-category a:first-child:before{
    font-family: 'roogan-font';
    content: "\e934";
    margin-right: 3px;
    font-size: 1.6rem;
    margin-top: -1px;
}
.entry-category a:first-child:before{
    font-family: 'roogan-font';
    content: "\e935";
    margin-right: 3px;
    font-size: 1.6rem;
}

circle {
    position: absolute;
    fill: none;
    stroke-width: 10;
    transform: translate(10px, 10px); /* This is to position it in the center */
    stroke-dasharray: 440;
    stroke-linecap: round;
}
.percent1 circle:nth-child(2) {
    stroke-dashoffset: calc(440 - (440 * 75) / 100); /* Here's what's changed */
    stroke: gold;
    animation: percent 1.5s linear;
    animation-delay: 1s;
}
.percent2 circle:nth-child(2) {
    stroke-dashoffset: calc(440 - (440 * 33) / 100);
    stroke: salmon;
    animation: percent 1.8s linear;
    animation-delay: 1.2s;
}

/* Animation definition */
@keyframes percent {
    0% {
        stroke-dashoffset: 0;
        stroke-width: 0;
       }
}

.roogan-overlay{
    .entry-meta,
    .entry-meta .meta-item,
    .entry-meta .meta-item span,
    .entry-meta .meta-item a{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    .entry-meta{
        justify-content: center;
    }

}
.roogan-overlay-bg-bottom{
    .entry-meta{
        justify-content: start;
    }    
}

.section-header-r.roogan-slider-nav .roogan-button-circle{
    color: var(--color-txt);
}
.section-header-r.roogan-slider-nav .roogan-button-circle:after{
    background: var(--color-txt-025);
    opacity: .5;
}
.section-header-r.roogan-slider-nav .roogan-button-circle:hover:after{
    transform: scale(1.2);
    opacity: 1;
}