
/*
ALL STYLES FOR RECOVERY PROCESS IN THIS FILE
*/

    #tm-recovery-process {
    /*background-image: url(https://blogsdir.imgix.net/1799/files/images/shape.png?monochrome=%23888888),url(https://blogsdir.imgix.net/1799/files/images/shape.png?monochrome=%23888888);
    background-attachment: fixed, fixed;
    background-repeat: no-repeat, no-repeat;
    background-position: -800px top, 800px bottom;
    background-size: contain, contain;*/
    }

    #tm-recovery-process [data-uk-switcher] > li > figure {position: relative;border-radius: 50%}

    #tm-recovery-process [data-uk-switcher] > li > figure > span {
    position: absolute;
    left: 0;
    right: 0;
    font-size: 44px;
    line-height: 44px;
    z-index: 3;
    font-weight: bold;
    }

    #tm-recovery-process [data-uk-switcher] > li > figure > span {color: #fff;text-shadow: 0.04em 0.045em 0.06em rgba(0,0,0,.7);}

    #tm-recovery-process [data-uk-switcher] > li.uk-active + li > figure > span, 
    #tm-recovery-process [data-uk-switcher] > li.uk-active + li + li > figure > span, 
    #tm-recovery-process [data-uk-switcher] > li.uk-active + li + li + li > figure > span, 
    #tm-recovery-process [data-uk-switcher] > li.uk-active + li + li + li + li > figure > span {color: #222;text-shadow: none;}

    #tm-recovery-process [data-uk-switcher] > li > figure > div {
    border-radius: 50%;
    border: 2px solid #b4ccdd;
    display: block;
    font-size: 44px;
    line-height: 2.25em;
    text-align: center;
    position: relative;
    transform: rotate(0deg);
    transition: all 1s ease-in-out;
    z-index: 2;
    }

    #tm-recovery-process [data-uk-switcher] > li > figure > div:before {
    content: "\f0d8";
    color: #ddd;
    position: absolute;
    top: -36px;
    left: 0;
    right: 0;
    font-family: FontAwesome;
    display: inline-block;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    transition: all 0.5s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }

    #tm-recovery-process [data-uk-switcher] > li.uk-active > figure > div:before {color: #9bc53d;}

    #tm-recovery-process [data-uk-switcher] > li > figure > div > a {display: block;}
    #tm-recovery-process [data-uk-switcher] > li.uk-active > figure > div {border: 5px solid #ffffff;transform: rotate(180deg);}

    #tm-recovery-process #tm-recovery-switcher > li > ul >li img {width: 300px;}

/* EXPANDING DOTTED LINE */
    #tm-recovery-process [data-uk-switcher] li:before {
    content: "";
    border-top: 5px dotted #0058b3;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    width:  0;
    transition: width .5s;
    z-index: -1;
    }
    #tm-recovery-process [data-uk-switcher] li:nth-child(1) + li.uk-active:before {width: 25%;}
    #tm-recovery-process [data-uk-switcher] li:nth-child(1) + li + li.uk-active:before {width: 50%;}
    #tm-recovery-process [data-uk-switcher] li:nth-child(1) + li + li + li.uk-active:before {width: 75%;}
    #tm-recovery-process [data-uk-switcher] li:nth-child(1) + li + li + li + li.uk-active:before {width: 100%;}

/* CIRCLE BACKGROUNDS */    
    /* STEP 1 */
    #tm-recovery-process [data-uk-switcher] li:nth-child(1) > figure {background: #245988;color: #ffffff;}

    /* STEP 2 */
    #tm-recovery-process [data-uk-switcher] li.uk-active:nth-child(1) + li > figure {background: #fff;}

    #tm-recovery-process [data-uk-switcher] li:nth-child(1) + li > figure {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f53737+0,ffbf72+100 */
     /* Old browsers */
     /* FF3.6-15 */
     /* Chrome10-25,Safari5.1-6 */
     /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
     /* IE6-9 */
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#245988+0,019b7f+100 */
    background: rgb(36,89,136); /* Old browsers */
    background: -moz-linear-gradient(-45deg,  rgba(36,89,136,1) 0%, rgba(1,155,127,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  rgba(36,89,136,1) 0%,rgba(1,155,127,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  rgba(36,89,136,1) 0%,rgba(1,155,127,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#245988', endColorstr='#019b7f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    }

    /* STEP 3 */
    #tm-recovery-process [data-uk-switcher] li.uk-active:nth-child(1) + li + li > figure, 
    #tm-recovery-process [data-uk-switcher] li:nth-child(1) + li.uk-active + li > figure {background: #fff; color: #555;}

    #tm-recovery-process [data-uk-switcher] li:nth-child(1) + li + li > figure {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffbf72+0,fafc71+100 */
     /* Old browsers */
     /* FF3.6-15 */
     /* Chrome10-25,Safari5.1-6 */
     /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
     /* IE6-9 */
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#019b7f+0,01b723+100 */
    background: rgb(1,155,127); /* Old browsers */
    background: -moz-linear-gradient(-45deg,  rgba(1,155,127,1) 0%, rgba(1,183,35,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  rgba(1,155,127,1) 0%,rgba(1,183,35,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  rgba(1,155,127,1) 0%,rgba(1,183,35,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#019b7f', endColorstr='#01b723',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    }

    /* STEP 4 */
    #tm-recovery-process [data-uk-switcher] li.uk-active:nth-child(1) + li + li + li > figure, 
    #tm-recovery-process [data-uk-switcher] li:nth-child(1) + li.uk-active + li + li > figure, 
    #tm-recovery-process [data-uk-switcher] li:nth-child(1) + li + li.uk-active + li > figure {background: #fff;color: #555;}

    #tm-recovery-process [data-uk-switcher] li:nth-child(1) + li + li + li > figure {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fafc71+0,00a300+100 */
     /* Old browsers */
     /* FF3.6-15 */
     /* Chrome10-25,Safari5.1-6 */
     /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
     /* IE6-9 */
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#01b723+43,6eeb01+100 */
    background: rgb(1,183,35); /* Old browsers */
    background: -moz-linear-gradient(-45deg,  rgba(1,183,35,1) 43%, rgba(110,235,1,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  rgba(1,183,35,1) 43%,rgba(110,235,1,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  rgba(1,183,35,1) 43%,rgba(110,235,1,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#01b723', endColorstr='#6eeb01',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    }

    /* STEP 5 */
    #tm-recovery-process [data-uk-switcher] li:nth-child(1) + li + li + li + li.uk-active > figure div {background: #6EEB01;}

/* MEDIA QUERIES */
    @media only screen and (max-width: 767px) {
        #tm-recovery-process [data-uk-switcher] > li > figure > div {
            width: 50px;
            height: 50px;
        }
        #tm-recovery-process [data-uk-switcher] > li > figure > span {
            font-size: 22px;
            line-height: 22px;
        }
        #tm-recovery-process [data-uk-switcher] > li > figure > div:before {
            font-size: .5em;
            top: -22px;
        }
        #tm-recovery-process {
            background-position: -180px top, 180px bottom;
        }

        #tm-recovery-process #tm-recovery-switcher h3 {
            font-size: 30px;
            line-height: 1.2em;
        }
    }

    @media only screen and (min-width: 768px) {
        #tm-recovery-process [data-uk-switcher] > li > figure > div {
            width: 100px;
            height: 100px;
        }
    }
