/*
Theme Name: Fashion Blogs Pro
Theme URI: https://www.themagnifico.net/products/fashion-blog-wordpress-theme/
Author: Themagnifico
Author URI: https://www.themagnifico.net/
Description: Premium Fashion Blogs WordPress Theme is indeed a perfect pick for fashion-themed websites. The best thing about this theme is, it is completely enriched with all the stunning features like custom colors, personalized text boxes, colorful templates, RTL Language support, personalized images, grid layouts, many columns, astonishing and stylish fonts, and much more. It is perfect for those who are looking for a perfect theme to make their fashion blog even more interesting for its users. It is entirely an impressive WordPress theme that entails all the required features to make a blog more engaging for everyone. With less effort, you will be able to set up a complete fashion-themed website of your own. This would be the perfect answer for all your needs and wants to make your online business successful.
Version: 0.0.3
Requires at least: 5.0
Tested up to: 6.8
Requires PHP: 5.2.4
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: fashion-blogs-pro
Tags: one-column, right-sidebar, custom-menu, editor-style, featured-images, full-width-template, sticky-post, theme-options, threaded-comments

Fashion Blogs Pro WordPress Theme has been created by Themagnifico(Themagnifico.net), 2018.
Fashion Blogs Pro WordPress Theme is released under the terms of GNU GPL

/* Basic Style */

.bypostauthor {
  font-weight: 600;
}
.wpcf7-spinner {
  display: none;
}

/*--------- Site Loader --------------*/

    .preloader{
      display: flex;
      background: #fd4597;
      height: 100%;
      width: 100%;
      left: 0;
      bottom: 0;
      top: 0;
      position: fixed;
      z-index: 99999;
    }
    .preloader .loading-dot{
        width: 15px;
        height: 15px;
        margin: auto;
        border-radius: 50%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-shadow: 0px 40px 0px 0px #fff,0px -40px 0px 0px #fff,40px 0px 0px 0px #fff,-40px 0px 0px 0px #fff,
                    40px 40px 0px 0px #fff,-40px -40px 0px 0px #fff,40px -40px 0px 0px #fff,-40px 40px 0px 0px #fff;
        animation: load 3s infinite linear;
    }
    @keyframes load{
        0% {
            transform: rotate(0deg); 
            box-shadow: 0px 40px 0px 0px #fff,0px -40px 0px 0px #fff,40px 0px 0px 0px #fff,-40px 0px 0px 0px #fff,
                        40px 40px 0px 0px #fff,-40px -40px 0px 0px #fff,40px -40px 0px 0px #fff,-40px 40px 0px 0px #fff;
        }
        25%{
            box-shadow: 0px 40px 0px 0px #fff,0px -40px 0px 0px #fff,40px 0px 0px 0px #fff,-40px 0px 0px 0px #fff,
                        -40px -40px 0px 0px #fff,40px 40px 0px 0px #fff,-40px 40px 0px 0px #fff,40px -40px 0px 0px #fff;
        }
        50%{
            box-shadow: 0px -40px 0px 0px #fff,0px 40px 0px 0px #fff,-40px 0px 0px 0px #fff,40px 0px 0px 0px #fff,
                        -40px -40px 0px 0px #fff,40px 40px 0px 0px #fff,-40px 40px 0px 0px #fff,40px -40px 0px 0px #fff;
        }
        70%{
            box-shadow: 0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,
                        0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff;
        }
        75%{
            width:10px;
            height:10px;
            box-shadow: 0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,
                        0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff;
        }
        80%{
            background-color: #fff;
            width:40px;
            height:40px;
            transform: rotate(360deg); 
            box-shadow: 0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,
                        0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff;
        }
        85%{
            background-color: #fff; 
            width:40px;
            height:40px;
            transform: rotate(360deg);
            box-shadow: 0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,
                        0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff;
        }
        90%{
            background-color: #fff; 
            width:10px;
            height:10px;
            transform: rotate(360deg); 
            box-shadow: 0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,
                        0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff;
        }
        95%{
            box-shadow: 0px 40px 0px 0px #fff,0px -40px 0px 0px #fff,40px 0px 0px 0px #fff,-40px 0px 0px 0px #fff,
                        40px 40px 0px 0px #fff,-40px -40px 0px 0px #fff,40px -40px 0px 0px #fff,-40px 40px 0px 0px #fff;
        }
        100%{
            transform: rotate(360deg);
            box-shadow: 0px 40px 0px 0px #fff,0px -40px 0px 0px #fff,40px 0px 0px 0px #fff,-40px 0px 0px 0px #fff,
                        40px 40px 0px 0px #fff,-40px -40px 0px 0px #fff,40px -40px 0px 0px #fff,-40px 40px 0px 0px #fff;
        }
    }

/*--------- Button animation --------------*/

    .button{
        color: #fff;
        background-color: transparent;
        border: none;
        overflow: hidden;
        position: relative;
        z-index: 1;
        transition: all 0.3s ease 0s;
        display: inline-block;
    }
    .button:focus,
    .button:hover{
        color: #11C7F8;
        background-color: transparent;
    }
    .button:before,
    .button:after{
        content: '';
        background-color: #fd4597;
        height: 100%;
        width: 100%;
        border-radius: inherit;
        transform-origin: bottom center;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        transition: all 0.5s ease 0s;
    }
    .button:after{
        background-color: transparent;
        height: 11px;
        width: 11px;
        border: 3px solid #fd4597;
        border-left: none;
        border-bottom: none;
        border-radius: 0;
        opacity: 0;
        transform: translateY(-50%) rotate(45deg);
        top: 45%;
    }
    .button:focus:before,
    .button:hover:before{
        opacity: 1;
        transform: perspective(700px) rotateX(-87deg);
    }
    .button:focus:after,
    .button:hover:after{
        opacity: 1;
        left: calc(100% - 22px);
    }