/*

IIIIIIIIIITTTTTTTTTTTTTTTTTTTTTTT    444444444WWWWWWWW                           WWWWWWWWEEEEEEEEEEEEEEEEEEEEEEBBBBBBBBBBBBBBBBB
I::::::::IT:::::::::::::::::::::T   4::::::::4W::::::W                           W::::::WE::::::::::::::::::::EB::::::::::::::::B
I::::::::IT:::::::::::::::::::::T  4:::::::::4W::::::W                           W::::::WE::::::::::::::::::::EB::::::BBBBBB:::::B
II::::::IIT:::::TT:::::::TT:::::T 4::::44::::4W::::::W                           W::::::WEE::::::EEEEEEEEE::::EBB:::::B     B:::::B
  I::::I  TTTTTT  T:::::T  TTTTTT4::::4 4::::4 W:::::W           WWWWW           W:::::W   E:::::E       EEEEEE  B::::B     B:::::B
  I::::I          T:::::T       4::::4  4::::4  W:::::W         W:::::W         W:::::W    E:::::E               B::::B     B:::::B
  I::::I          T:::::T      4::::4   4::::4   W:::::W       W:::::::W       W:::::W     E::::::EEEEEEEEEE     B::::BBBBBB:::::B
  I::::I          T:::::T     4::::444444::::444  W:::::W     W:::::::::W     W:::::W      E:::::::::::::::E     B:::::::::::::BB
  I::::I          T:::::T     4::::::::::::::::4   W:::::W   W:::::W:::::W   W:::::W       E:::::::::::::::E     B::::BBBBBB:::::B
  I::::I          T:::::T     4444444444:::::444    W:::::W W:::::W W:::::W W:::::W        E::::::EEEEEEEEEE     B::::B     B:::::B
  I::::I          T:::::T               4::::4       W:::::W:::::W   W:::::W:::::W         E:::::E               B::::B     B:::::B
  I::::I          T:::::T               4::::4        W:::::::::W     W:::::::::W          E:::::E       EEEEEE  B::::B     B:::::B
II::::::II      TT:::::::TT             4::::4         W:::::::W       W:::::::W         EE::::::EEEEEEEE:::::EBB:::::BBBBBB::::::B
I::::::::I      T:::::::::T           44::::::44        W:::::W         W:::::W          E::::::::::::::::::::EB:::::::::::::::::B
I::::::::I      T:::::::::T           4::::::::4         W:::W           W:::W           E::::::::::::::::::::EB::::::::::::::::B
IIIIIIIIII      TTTTTTTTTTT           4444444444          WWW             WWW            EEEEEEEEEEEEEEEEEEEEEEBBBBBBBBBBBBBBBBB


Example:

    <i class="comp-piersmacom-logo-xs"></i>
    <i class="comp-piersmacom-markc"></i>

Custom example:

    <i style="width: 150px;" class="comp-piersmacom-markc"></i>
    OR
    <i style="width: 10em;" class="comp-piersmacom-markc"></i>

Or in the CSS

    i.comp-piersmacom-logo {
        width: 150px!important;
    }

*/

/* Logo <i> */

i.comp-piersmacom-logo:after {
    content: url(assets/logo/Piersma.COM.svg);
    width: 1000px;
}

i.comp-IT4WEB-logo:after {
    content: url(assets/logo/IT4WEB.svg);
    width: 1000px;
}

i.comp-piersmasro-logo:after {
    content: url(assets/logo/piersma.SRO.svg);
    width: 1000px;
}

i.comp-qubify-logo:after {
    content: url(assets/logo/Qubify.svg);
    width: 1000px;
}

i.comp-piersmacom-logo-xs:after {
    content: url(assets/logo/Piersma.COM-xs.svg);
    width: 100px;
}

i.comp-IT4WEB-logo-xs:after {
    content: url(assets/logo/IT4WEB-xs.svg);
    width: 100px;
}

i.comp-piersmasro-logo-xs:after {
    content: url(assets/logo/piersma.SRO-xs.svg);
    width: 100px;
}

i.comp-qubify-logo-xs:after {
    content: url(assets/logo/Qubify-xs.svg);
    width: 100px;
}

i.comp-piersmacom-logo-sm:after {
    content: url(assets/logo/Piersma.COM-sm.svg);
    width: 200px;
}

i.comp-IT4WEB-logo-sm:after {
    content: url(assets/logo/IT4WEB-sm.svg);
    width: 200px;
}

i.comp-piersmasro-logo-sm:after {
    content: url(assets/logo/piersma.SRO-sm.svg);
    width: 200px;
}

i.comp-qubify-logo-sm:after {
    content: url(assets/logo/Qubify-sm.svg);
    width: 200px;
}

i.comp-piersmacom-logo-md:after {
    content: url(assets/logo/Piersma.COM-md.svg);
    width: 300px;
}

i.comp-IT4WEB-logo-md:after {
    content: url(assets/logo/IT4WEB-md.svg);
    width: 300px;
}

i.comp-piersmasro-logo-md:after {
    content: url(assets/logo/piersma.SRO-md.svg);
    width: 300px;
}

i.comp-qubify-logo-md:after {
    content: url(assets/logo/Qubify-md.svg);
    width: 300px;
}

i.comp-piersmacom-logo-lg:after {
    content: url(assets/logo/Piersma.COM-lg.svg);
    width: 500px;
}

i.comp-IT4WEB-logo-lg:after {
    content: url(assets/logo/IT4WEB-lg.svg);
    width: 500px;
}

i.comp-piersmasro-logo-lg:after {
    content: url(assets/logo/piersma.SRO-lg.svg);
    width: 500px;
}

i.comp-qubify-logo-lg:after {
    content: url(assets/logo/Qubify-lg.svg);
    width: 500px;
}

i.comp-piersmacom-logo-xl:after {
    content: url(assets/logo/Piersma.COM-xl.svg);
    width: 800px;
}

i.comp-IT4WEB-logo-xl:after {
    content: url(assets/logo/IT4WEB-xl.svg);
    width: 800px;
}

i.comp-piersmasro-logo-xl:after {
    content: url(assets/logo/piersma.SRO-xl.svg);
    width: 800px;
}

i.comp-qubify-logo-xl:after {
    content: url(assets/logo/Qubify-xl.svg);
    width: 800px;
}


/* Beeldmerk <i> */

i.comp-piersmacom-mark:after {
    content: url(assets/marks/Piersma.COM_mark.svg);
    width: 14px;
}

i.comp-IT4WEB-mark:before {
    content: url(assets/marks/IT4WEB_mark.svg);
    width: 14px;
}

i.comp-piersmasro-mark:after {
    content: url(assets/marks/piersma.SRO_mark.svg);
    width: 14px;
}

i.comp-qubify-mark:after {
    content: url(assets/marks/Qubify_mark.svg);
    width: 14px;
}

i.comp-piersmacom-mark-xs:after {
    content: url(assets/marks/Piersma.COM_mark-xs.svg);
    width: 2em;
}

i.comp-IT4WEB-mark-xs:after {
    content: url(assets/marks/IT4WEB_mark-xs.svg);
    width: 2em;
}

i.comp-piersmasro-mark-xs:after {
    content: url(assets/marks/piersma.SRO_mark-xs.svg);
    width: 2em;
}

i.comp-qubify-mark-xs:after {
    content: url(assets/marks/Qubify_mark-xs.svg);
    width: 2em;
}

i.comp-piersmacom-mark-sm:after {
    content: url(assets/marks/Piersma.COM_mark-sm.svg);
    width: 3em;
}

i.comp-IT4WEB-mark-sm:after {
    content: url(assets/marks/IT4WEB_mark-sm.svg);
    width: 3em;
}

i.comp-piersmasro-mark-sm:after {
    content: url(assets/marks/piersma.SRO_mark-sm.svg);
    width: 3em;
}

i.comp-qubify-mark-sm:after {
    content: url(assets/marks/Qubify_mark-sm.svg);
    width: 3em;
}

i.comp-piersmacom-mark-md:after {
    content: url(assets/marks/Piersma.COM_mark-md.svg);
    width: 4em;
}

i.comp-IT4WEB-mark-md:after {
    content: url(assets/marks/IT4WEB_mark-md.svg);
    width: 4em;
}

i.comp-piersmasro-mark-md:after {
    content: url(assets/marks/piersma.SRO_mark-md.svg);
    width: 4em;
}

i.comp-qubify-mark-md:after {
    content: url(assets/marks/Qubify_mark-md.svg);
    width: 4em;
}

i.comp-piersmacom-mark-lg:after {
    content: url(assets/marks/Piersma.COM_mark-lg.svg);
    width: 5em;
}

i.comp-IT4WEB-mark-lg:after {
    content: url(assets/marks/IT4WEB_mark-lg.svg);
    width: 5em;
}

i.comp-piersmasro-mark-lg:after {
    content: url(assets/marks/piersma.SRO_mark-lg.svg);
    width: 5em;
}

i.comp-qubify-mark-lg:after {
    content: url(assets/marks/Qubify_mark-lg.svg);
    width: 5em;
}

i.comp-piersmacom-mark-xl:after {
    content: url(assets/marks/Piersma.COM_mark-xl.svg);
    width: 8em;
}

i.comp-IT4WEB-mark-xl:after {
    content: url(assets/marks/IT4WEB_mark-xl.svg);
    width: 8em;
}

i.comp-piersmasro-mark-xl:after {
    content: url(assets/marks/piersma.SRO_mark-xl.svg);
    width: 8em;
}

i.comp-qubify-mark-xl:after {
    content: url(assets/marks/Qubify_mark-xl.svg);
    width: 8em;
}

i {
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none; /* Firefox all */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Likely future */
}

.text-it4web {
    color: #f69322;
}

.text-piersmacom {
    color: #97c33c;
}

.text-piersmasro {
    color: #cd1c69;
}

.text-qubify {
    color: #60808f;
}

.text-qubify-p2 {
    color: #a4c1cf;
}

.text-it4web-s {
    color: #1385b8;
}

.text-piersmacom-s {
    color: #8b8c8e;
}

.text-piersmasro-s {
    color: #8b8c8e;
}

.text-qubify-s {
    color: #c0dae1;
}

/* btn IT4WEB primair */
.btn-it4web-p {
    background: #f69322;
    border: 1px solid #f69322;
    color: #ffffff;
}

.btn-it4web-p:hover {
    background: #f7ad58;
    border: 1px solid #f7ad58;
    color: #ffffff;
}

.btn-it4web-p:focus {
    color: #ffffff;
}

/* btn IT4WEB secundair */
.btn-it4web-s {
    background: #1385b8;
    border: 1px solid #1385b8;
    color: #ffffff;
}

.btn-it4web-s:hover {
    background: #3d9cc6;
    border: 1px solid #3d9cc6;
    color: #ffffff;
}

.btn-it4web-s:focus {
    color: #ffffff;
}

/* btn Piersma.com primair */
.btn-piersmacom-p {
    background: #97c33c;
    border: 1px solid #97c33c;
    color: #ffffff;
}

.btn-piersmacom-p:hover {
    background: #b1d16f;
    border: 1px solid #b1d16f;
    color: #ffffff;
}

.btn-piersmacom-p:focus {
    color: #ffffff;
}

/* btn Piersma.com secundair */
.btn-piersmacom-s {
    background: #8b8c8e;
    border: 1px solid #8b8c8e;
    color: #ffffff;
}

.btn-piersmacom-s:hover {
    background: #9d9e9f;
    border: 1px solid #9d9e9f;
    color: #ffffff;
}

.btn-piersmacom-s:focus {
    color: #ffffff;
}

/* btn Piersma.sro primair */
.btn-piersmasro-p {
    background: #cd1c69;
    border: 1px solid #cd1c69;
    color: #ffffff;
}

.btn-piersmasro-p:hover {
    background: #cb427e;
    border: 1px solid #cb427e;
    color: #ffffff;
}

.btn-piersmasro-p:focus {
    color: #ffffff;
}

/* btn Piersma.sro secundair */
.btn-piersmasro-s {
    background: #8b8c8e;
    border: 1px solid #8b8c8e;
    color: #ffffff;
}

.btn-piersmasro-s:hover {
    background: #9d9e9f;
    border: 1px solid #9d9e9f;
    color: #ffffff;
}

.btn-piersmasro-s:focus {
    color: #ffffff;
}

/* btn Qubify primair 1*/
.btn-qubify-p {
    background: #60808f;
    border: 1px solid #60808f;
    color: #ffffff;
}

.btn-qubify-p:hover {
    background: #82949d;
    border: 1px solid #82949d;
    color: #ffffff;
}

.btn-qubify-p:focus {
    color: #ffffff;
}

/* btn Qubify primair 2*/
.btn-qubify-p2 {
    background: #a4c1cf;
    border: 1px solid #a4c1cf;
    color: #ffffff;
}

.btn-qubify-p2:hover {
    background: #aac4d0;
    border: 1px solid #b1c5ce;
    color: #000000;
}

.btn-qubify-p2:focus {
    color: #ffffff;
}

/* btn Qubify secundair */
.btn-qubify-s {
    background: #c0dae1;
    border: 1px solid #c0dae1;
    color: #000000;
}

.btn-qubify-s:hover {
    background: #dee7ea;
    border: 1px solid #dee7ea;
    color: #000000;
}

/* ------------------ */
/* ----- LABELS ----- */
/* ------------------ */

/* btn IT4WEB primair */
.label-it4web-p {
    background: #f69322;
    border: 1px solid #f69322;
    color: #ffffff;
}

/* btn IT4WEB secundair */
.label-it4web-s {
    background: #1385b8;
    border: 1px solid #1385b8;
    color: #ffffff;
}

/* btn Piersma.com primair */
.label-piersmacom-p {
    background: #97c33c;
    border: 1px solid #97c33c;
    color: #ffffff;
}

/* btn Piersma.com secundair */
.label-piersmacom-s {
    background: #8b8c8e;
    border: 1px solid #8b8c8e;
    color: #ffffff;
}

/* btn Piersma.sro primair */
.label-piersmasro-p {
    background: #cd1c69;
    border: 1px solid #cd1c69;
    color: #ffffff;
}

/* btn Piersma.sro secundair */
.label-piersmasro-s {
    background: #8b8c8e;
    border: 1px solid #8b8c8e;
    color: #ffffff;
}

/* btn Qubify primair 1*/
.label-qubify-p {
    background: #60808f;
    border: 1px solid #60808f;
    color: #ffffff;
}

/* btn Qubify primair 2*/
.label-qubify-p2 {
    background: #a4c1cf;
    border: 1px solid #a4c1cf;
    color: #ffffff;
}

/* btn Qubify secundair */
.label-qubify-s {
    background: #c0dae1;
    border: 1px solid #c0dae1;
    color: #000000;
}

/* Spinner Demo css */

.spinner_demo_custom_wrap {
    text-align: center;
    vertical-align: middle;
    padding-bottom: 100px;
    background: whitesmoke;
    border-radius: 2%;
    margin: 0 20px 100px 20px;
    box-shadow: 0 40px 60px -20px rgba(0, 0, 0, 0.1);
}

.spinner_demo_container {
    text-align: center;
    vertical-align: middle;
    padding-bottom: 100px;
    background: whitesmoke;
    border-radius: 2%;
    margin: 0 20px 100px 20px!important;
    box-shadow: 0 40px 60px -20px rgba(0, 0, 0, 0.1);
}

.spinner_demo_page_header {
    text-align: center;
    vertical-align: middle;
    padding: 20px;
    background: white;
    margin: 0 30% 100px 30%;
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.1);
}

.spinner_demo_header {
    padding: 50px;
}

/* ------------------ */
/* Loaders Framework */
/* ------------------ */

/*loader 1*/
.twirl {
    content: "";
    display: inline-block;
    position: relative;
}
.twirl-1 {
    display: inline-block;
    animation: twirl 5s ease-out 3;
}

.twirl-2 {
    display: inline-block;
    animation: twirl 5s ease-out 0.8s 3;
}

.twirl-3 {
    display: inline-block;
    animation: twirl 5s ease-out 1.2s 3;
}

.twirl-4 {
    display: inline-block;
    animation: twirl 5s ease-out 2.2s 3;
}


@keyframes twirl {
    0% {transform: scale(0) rotateY(0deg);}
    70% {transform: scale(1) rotateY(360deg);}
    90% {transform: scale(1.2) rotateY(0deg);}
    100% {transform: scale(1) rotateY(0deg);}
}

/*loader 2*/
.jojo {
    content: "";
    display: inline-block;
    position: relative;
}
.jojo-1 {
    display: inline-block;
    animation: jojo 15s ease-out 1;
}

.jojo-2 {
    display: inline-block;
    animation: jojo 15s ease-out 2.2s 1;
}

.jojo-3 {
    display: inline-block;
    animation: jojo 15s ease-out 3s 1;
}

.jojo-4 {
    display: inline-block;
    animation: jojo 15s ease-out 3.6s 1;
}


@keyframes jojo {
    0% {transform: scale(0) translateY(0);}
    25% {transform: scale(1) translateY(30px);}
    30% {transform: scale(0.1) translateY(0);}
    35% {transform: scale(0) translateY(0);}
    55% {transform: scale(1) translateY(30px);}
    60% {transform: scale(0.1) translateY(0);}
    75% {transform: scale(0) translateY(0);}
    98% {transform: scale(1.2) translateY(30px);}
    100% {transform: scale(1) translateY(0);}
}

/*loader 3*/
.wave{
    content: "";
    display: inline-block;
    position: relative;
}
.wave-1 {
    display: inline-block;
    animation: wave 3s ease-in-out 5;
}

.wave-2 {
    display: inline-block;
    animation: wave 3s ease-in-out 0.5s 5;
}

.wave-3 {
    display: inline-block;
    animation: wave 3s ease-in-out 1s 5;
}

.wave-4 {
    display: inline-block;
    animation: wave 3s ease-in-out 1.5s 5;
}


@keyframes wave {
    0% {transform: translateY(0);}
    50% {transform: translateY(-30px);}
    100% {transform: translateY(0);}
}

/*loader 4*/

.fill {
    display: inline-block;
    background: none;
    width: 250px;
    height: 28px;
    border: 4px solid #eee;
    border-radius: 1px;
    position: relative;
}

.fill .fill-1 {
    display: block;
    background: #CC1B69;
    width: 250px;
    height: 20px;
    border-radius: 1px;
    position: absolute;
    animation-name: fill;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}

@-webkit-keyframes fill {
    0% {
        width: 0;
        background: #CC1B69;
    }
    25% {
        background: #60808F;
    }
    40% {
        width: 20%;
    }
    50% {
        width: 45%;
        background: #97C33C;
    }
    90% {
        width: 60%;
    }
    100% {
        width: 100%;
        background: #1385B8;
    }
}

/*loader 5*/
.hop {
    content: "";
    display: inline-block;
    position: relative;
}
.hop-1 {
    display: inline-block;
    -webkit-animation: hop 0.6s ease-in-out 12;
    animation: hop 0.6s ease-in-out 12;
}

.hop-2 {
    display: inline-block;
    -webkit-animation: hop 0.6s ease-in-out 0.3s 12;
    animation: hop 0.6s ease-in-out 0.3s 12;
}

.hop-3 {
    display: inline-block;
    -webkit-animation: hop 0.6s ease-in-out 0.2s 12;
    animation: hop 0.6s ease-in-out 0.2s 12;
}

.hop-4 {
    display: inline-block;
    -webkit-animation: hop 0.6s ease-in-out 0.4s 12;
    animation: hop 0.6s ease-in-out 0.4s 12;
}


@-webkit-keyframes hop {
    0% {
        -webkit-transform: translateY(0) rotateX(40deg);
        transform: translateY(0) rotateX(40deg);
    }
    50% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
    100% {
        -webkit-transform: translateY(0) rotateX(40deg);
        transform: translateY(0) rotateX(40deg);
    }
}
@keyframes hop {
    0% {
        -webkit-transform: translateY(0) rotateX(40deg);
        transform: translateY(0) rotateX(40deg);
    }
    50% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
    100% {
        -webkit-transform: translateY(0) rotateX(40deg);
        transform: translateY(0) rotateX(40deg);
    }
}

/* end Loaders Framework */

/* ------------------ */
/* Spinners Framework */
/* ------------------ */

.f_spinner_1 {
    text-align: center;
    width: 100px;
    height: 100px;
    background: none;
    border-radius: 50%;
    position: relative;
    margin: 50px;
    display: inline-block;
    border: 4px solid transparent;
    border-top-color: #1385B8;
    border-right-color: #CC1B69;
    border-bottom-color: #60808F;
    border-left-color: #97C33C;
    -webkit-animation-name: heartbeat;
    -webkit-animation-duration: 2400ms;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: infinite;
    animation-name: heartbeat;
    animation-duration: 2400ms;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}

.f_spinner_1a {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    margin-top: 60px;
    margin-left: -5px;
    -webkit-animation-delay: 2400ms;
    animation-delay: 2400ms;
}

.f_spinner_1b {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    margin-top: 35px;
    margin-left: 15px;
    -webkit-animation-delay: 4800ms;
    animation-delay: 4800ms;
}

.f_spinner_1c {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    margin-top: 35px;
    margin-left: -25px;
    -webkit-animation-delay: 7200ms;
    animation-delay: 7200ms;
}

.f_spinner_1d {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    margin-top: 10px;
    margin-left: -5px;
    -webkit-animation-delay: 9400ms;
    animation-delay: 9400ms;
}

@-webkit-keyframes heartbeat {
    0% {
        -webkit-transform: scale(0.6) rotateY(0deg);
        transform: scale(0.6) rotateY(0deg);
        opacity: 0
    }
    5% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5)
    }
    40% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8)
    }
    50% {
        opacity: 1
    }
    45% {
        -webkit-transform: scale(0.7);
        transform: scale(0.7)
    }
    100%
    {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
        opacity: 0}
}
@keyframes heartbeat {
    0% {
        -webkit-transform: scale(0.6) rotateY(0deg);
        transform: scale(0.6) rotateY(0deg);
        opacity: 0
    }
    5% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5)
    }
    40% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8)
    }
    50% {
        opacity: 1
    }
    45% {
        -webkit-transform: scale(0.7);
        transform: scale(0.7)
    }
    100%
    {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
        opacity: 0
    }
}

.f_spinner_2 {
    text-align: center;
    width: 100px;
    height: 100px;
    background: none;
    border-radius: 50%;
    position: relative;
    margin: 50px;
    display: inline-block;
}

.f_spinner_2a {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    border: 4px solid transparent;
    border-top-color: #1385B8;
    border-right-color: #CC1B69;
    border-bottom-color: #60808F;
    border-left-color: #97C33C;
    -webkit-animation: round 5s linear infinite;
    animation: round 2s linear infinite;
}

.f_spinner_2b {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    margin-top: 20px;
    margin-left: 24px;
    -webkit-animation: twist 2.2s linear infinite;
    animation: twist 2.2s linear infinite;
}
.f_spinner_2c {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    margin-top: 20px;
    margin-left: -24px;
    -webkit-animation: twist 2s linear infinite;
    animation: twist 2s linear infinite;
}
.f_spinner_2d {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    margin-top: 55px;
    margin-left: 25px;
    -webkit-animation: twist 2.3s linear 0.2s infinite;
    animation: twist 2.3s linear 0.2s infinite;
}
.f_spinner_2e {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    margin-top: 55px;
    margin-left: -25px;
    -webkit-animation: twist 2s linear 0.1s infinite;
    animation: twist 2s linear 0.1s infinite;
}

@-webkit-keyframes round {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes round {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes twist {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg)
    }
    100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg)
    }
}
@keyframes twist {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg)
    }
    100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg)
    }
}

.f_spinner_3 {
    text-align: center;
    width: 100px;
    height: 100px;
    background: transparent;
    border-radius: 50%;
    position: relative;
    margin: 50px;
    display: inline-block;
}

.f_spinner_3a {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    border: 8px solid #60808F;
    border-radius: 50%;
    position: absolute;
    animation: pulse 3s linear 0.5s infinite;
    opacity: 0;
}

.f_spinner_3b {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    border: 8px solid #1385B8;
    border-radius: 50%;
    position: absolute;
    animation: pulse 3s linear 1.5s infinite;
    opacity: 0;
}

.f_spinner_3c {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    border: 8px solid #CC1B69;
    border-radius: 50%;
    position: absolute;
    animation: pulse 3s linear 1s infinite;
    opacity: 0;
}

.f_spinner_3d {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    border: 8px solid #97C33C;
    border-radius: 50%;
    position: absolute;
    animation: pulse 3s linear infinite;
    opacity: 0;
}

@keyframes pulse {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}

.f_spinner_4 {
    text-align: center;
    content: "";
    display: inline-block;
    margin: 50px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: relative;
    border: 4px solid transparent;
    border-top-color: #1385B8;
    border-right-color: #CC1B69;
    border-bottom-color: #60808F;
    border-left-color: #97C33C;
    -webkit-animation: spins 5s linear infinite;
    animation: spins 2s linear infinite;
}

@-webkit-keyframes spins {
    0% {
        -webkit-transform: rotate(0deg) scale(0.8);
        transform: rotate(0deg) scale(0.8);
    }
    50% {
        -webkit-transform: rotate(45deg) scale(1);
        transform: rotate(45deg) scale(1);
    }
    100% {
        -webkit-transform: rotate(360deg) scale(0.8);
        transform: rotate(360deg) scale(0.8);
    }
}
@keyframes spins {
    0% {
        -webkit-transform: rotate(0deg) scale(0.8);
        transform: rotate(0deg) scale(0.8);
    }
    50% {
        -webkit-transform: rotate(45deg) scale(1);
        transform: rotate(45deg) scale(1);
    }
    100% {
        -webkit-transform: rotate(360deg) scale(0.8);
        transform: rotate(360deg) scale(0.8);
    }
}

.f_spinner_5 {
    text-align: center;
    animation: spin 4s linear infinite;
    width: 100px;
    height: 100px;
    background: #e0e0e0;
    border-radius: 50%;
    position: relative;
    margin: 50px;
    display: inline-block;
}

.f_spinner_5a {
    animation: tumble 4.5s linear infinite;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    transform-origin: right center;
}

.f_spinner_5b {
    animation: tumble 4.5s linear infinite;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    transform-origin: bottom center;
}

.f_spinner_5c {
    animation: tumble 4.5s linear infinite;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    transform-origin: top center;
}

.f_spinner_5d {
    animation: tumble 4.5s linear infinite;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    transform-origin: left center;
}

.f_spinner_6 {
    text-align: center;
    width: 100px;
    height: 100px;
    background: #e0e0e0;
    border-radius: 50%;
    position: relative;
    margin: 50px;
    display: inline-block;
}
.f_spinner_6 .f_spinner_6a {
    animation: spin 4s linear infinite;
    width: 100px;
    height: 100px;
    background: none;
    border-radius: 50%;
    position: absolute;
    display: block;
}
.f_spinner_6 .f_spinner_6a .f_spinner_6a {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    top: auto;
    bottom: -10px;
    margin-left: 36px;
    animation: bouncy 0.5s ease-in infinite;
}
.f_spinner_6 .f_spinner_6b {
    animation: spin 4s linear 1s infinite;
    width: 100px;
    height: 100px;
    background: none;
    border-radius: 50%;
    position: absolute;
    display: block;
}
.f_spinner_6 .f_spinner_6b .f_spinner_6b {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    top: auto;
    bottom: -10px;
    margin-left: 36px;
    animation: bouncy 0.5s ease-in infinite;
}
.f_spinner_6 .f_spinner_6c {
    animation: spin 4s linear 2s infinite;
    width: 100px;
    height: 100px;
    background: none;
    border-radius: 50%;
    position: absolute;
    display: block;
}
.f_spinner_6 .f_spinner_6c .f_spinner_6c {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    top: auto;
    bottom: -10px;
    margin-left: 36px;
    animation: bouncy 0.5s ease-in infinite;
}
.f_spinner_6 .f_spinner_6d {
    animation: spin 4s linear 3s infinite;
    width: 100px;
    height: 100px;
    background: none;
    border-radius: 50%;
    position: absolute;
    display: block;
}
.f_spinner_6 .f_spinner_6d .f_spinner_6d {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    top: auto;
    bottom: -10px;
    margin-left: 36px;
    animation: bouncy 0.5s ease-in infinite;
}

@keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

@keyframes tumble {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(60deg);}
    100% {transform: rotate(360deg);}
}

@keyframes bouncy {
    0% {transform: translateY(0px);}
    50% {transform: translateY(30px);}
}

.f_spinner_7 {
    text-align: center;
    width: 0px;
    height: 0px;
    background: #e0e0e0;
    border-radius: 50%;
    position: relative;
    margin: 50px;
    display: inline-block;
}

.f_spinner_7a {
    display: block;
    height: 20px;
    width: 20px;
    position: absolute;
    left: -25px;
    animation: bounce 1s ease-in-out infinite;
}

.f_spinner_7b {
    display: block;
    height: 20px;
    width: 0px;
    position: absolute;
    animation: bounce 1s ease-in-out 0.25s infinite;
}

.f_spinner_7c {
    display: block;
    height: 20px;
    width: 20px;
    position: absolute;
    left: 25px;
    animation: bounce 1s ease-in-out 0.50s infinite;
}

.f_spinner_7d {
    display: block;
    height: 20px;
    width: 20px;
    position: absolute;
    left: 50px;
    animation: bounce 1s ease-in-out 0.75s infinite;
}

@keyframes bounce {
    0%, 75%, 100% {transform: translateY(0px);}
    25% {transform: translateY(-30px);}
}

/* end Spinners Framework */


/* ------------------ */
/* spinners IT4WEB */
/* ------------------ */

.spinnerI {
    text-align: center;
    width: 100px;
    height: 100px;
    background: #e0e0e0;
    border-radius: 50%;
    position: relative;
    margin: 50px;
    display: inline-block;
}

.spinnerI-1{
    text-align: center;
    content: "";
    display: block;
    width: 106px;
    height: 106px;
    border-radius: 50%;
    position: absolute;
    top: -4px;
    left: -4px;
    border: 4px solid transparent;
    border-top-color: #F69322;
    border-bottom-color: #F69322;
    animation: spinny 1s linear infinite;
}

.spinnerI-1a {
    position: absolute;
    margin-top: 18px;
    margin-left: 20px;
    animation: pulse 4s linear 0.2s infinite;
}

@keyframes spinny {
    0% {transform: rotate(0deg) scale(1);}
    50% {transform: rotate(45deg) scale(1.2);}
    100% {transform: rotate(360deg) scale(1);}
}

.spinnerI-2 {
    text-align: center;
    animation: spin 4s linear infinite;
    width: 100px;
    height: 100px;
    background: #e0e0e0;
    border-radius: 50%;
    position: relative;
    margin: 50px;
    display: inline-block;
}

.spinnerI-2a {
    animation: tumble 4.5s linear infinite;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
}

.spinnerI-2b {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    top: auto;
    bottom: -10px;
    margin-left: 36px;
    animation: bouncy 0.5s ease-in infinite;
}

@keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

@keyframes tumble {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(60deg);}
    100% {transform: rotate(360deg);}
}

@keyframes bouncy {
    0% {transform: translateY(0px);}
    50% {transform: translateY(30px);}
}

.spinnerI-3 {
    text-align: center;
    width: 100px;
    height: 100px;
    background: none;
    border-radius: 50%;
    position: relative;
    margin: 50px;
    display: inline-block;
    border: 4px solid #e0e0e0;
}

.spinnerI-3a{
    content: "";
    display: block;
    width: 4px;
    height: 64px;
    background: #F69322;
    border-radius: 4px;
    position: absolute;
    top: 50%;
    bottom: 50%;
    margin-top: -64px;
    margin-left: 43px;
    transform-origin: bottom center;
    animation: spin 2s linear infinite;
}

.spinnerI-3b{
    content: "";
    display: block;
    width: 2px;
    height: 44px;
    background: #F69322;
    border-radius: 4px;
    position: absolute;
    top: 50%;
    bottom: 50%;
    margin-top: -44px;
    margin-left: 43px;
    transform-origin: bottom center;
    animation: spin 24s linear infinite;

}

.spinnerI-4 {
    text-align: center;
    width: 100px;
    height: 100px;
    background: #e0e0e0;
    border-radius: 20%;
    position: relative;
    margin: 50px;
    display: inline-block;
}

.spinnerI-4a {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    animation: pulse 2s linear infinite;
    margin-top: 50px;
    opacity: 0;
}

.spinnerI-4b {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    margin-left: -35px;
    animation: pulse 3.2s linear 2.3s infinite;
    opacity: 0;
}

.spinnerI-4c {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    animation: pulse 2.5s linear 2s infinite;
    margin-top: 40px;
    margin-left: 45px;
    opacity: 0;
}

.spinnerI-4d {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    animation: pulse 3s linear 2.8s infinite;
    margin-top: -20px;
    opacity: 0;
}

@keyframes pulse {
    0% {transform: scale(0);}
    0% {opacity: 0;}
    100% {transform: scale(1.3)}
    100% {opacity: 1;}
}

.spinnerI-5 {
    text-align: center;
    width: 0;
    height: 0;
    background: #e0e0e0;
    border-radius: 50%;
    position: relative;
    margin: 50px;
    display: inline-block;
}

.spinnerI-5a {
    display: block;
    height: 20px;
    width: 20px;
    position: absolute;
    left: -40px;
    animation: bounce 1s ease-in-out infinite;
}

.spinnerI-5b {
    display: block;
    height: 20px;
    width: 20px;
    position: absolute;
    animation: bounce 1s ease-in-out 0.33s infinite;
}

.spinnerI-5c {
    display: block;
    height: 20px;
    width: 20px;
    position: absolute;
    left: 40px;
    animation: bounce 1s ease-in-out 0.66s infinite;
}

@keyframes bounce {
    0%, 75%, 100% {transform: translateY(0px);}
    25% {transform: translateY(-30px);}
}

.spinnerI-6 {
    text-align: center;
    width: 100px;
    height: 100px;
    background: #e0e0e0;
    border-radius: 50%;
    position: relative;
    margin: 50px;
    display: inline-block;
    border: 4px solid #1385B8;
    opacity: 0;
    animation: pulsing 2.5s ease-out infinite;
}

.spinnerI-6a {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    margin-top: 15px;
    margin-left: -5px;
    animation: twist 5s linear infinite;
}

@keyframes pulsing {
    0% {transform: scale(0.6)}
    0% {opacity: 0}
    5% {transform: scale(0.5)}
    40% {transform: scale(0.8)}
    50% {opacity: 1}
    45% {transform: scale(0.7)}
    100% {opacity: 0}

}
@keyframes twist {
    0% {transform: rotateY(0deg)}
    100% {transform: rotateY(360deg)}
}

/* end spinners IT4WEB */

/* ------------------ */
/* Spinners Piersma.COM */
/* ------------------ */

.spinnerP {
    text-align: center;
    width: 100px;
    height: 100px;
    background: #e0e0e0;
    border-radius: 50%;
    position: relative;
    margin: 50px;
    display: inline-block;
}

.spinnerP-1{
    content: "";
    display: block;
    width: 106px;
    height: 106px;
    border-radius: 50%;
    position: absolute;
    top: -4px;
    left: -4px;
    border: 4px solid transparent;
    border-top-color: #97C33C;
    border-bottom-color: #8B8C8E;
    animation: spinny 1s linear infinite;
}

.spinnerP-1a {
    position: absolute;
    margin-top: 18px;
    margin-left: 20px;
    animation: pulse 4s linear 0.2s infinite;
}

@keyframes spinny {
    0% {transform: rotate(0deg) scale(1);}
    50% {transform: rotate(45deg) scale(1.2);}
    100% {transform: rotate(360deg) scale(1);}
}

.spinnerP-2 {
    text-align: center;
    animation: spin 4s linear infinite;
    width: 100px;
    height: 100px;
    background: #e0e0e0;
    border-radius: 50%;
    position: relative;
    margin: 50px;
    display: inline-block;
}

.spinnerP-2a {
    animation: tumble 4.5s linear infinite;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
}

.spinnerP-2b {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    top: auto;
    bottom: -10px;
    margin-left: 36px;
    animation: bouncy 0.5s ease-in infinite;
}

@keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

@keyframes tumble {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(60deg);}
    100% {transform: rotate(360deg);}
}

@keyframes bouncy {
    0% {transform: translateY(0px);}
    50% {transform: translateY(30px);}
}

.spinnerP-3 {
    text-align: center;
    width: 100px;
    height: 100px;
    background: none;
    border-radius: 50%;
    position: relative;
    margin: 50px;
    display: inline-block;
    border: 4px solid #e0e0e0;
}

.spinnerP-3a{
    content: "";
    display: block;
    width: 4px;
    height: 64px;
    background: #97C33C;
    border-radius: 4px;
    position: absolute;
    top: 50%;
    bottom: 50%;
    margin-top: -64px;
    margin-left: 43px;
    transform-origin: bottom center;
    animation: spin 2s linear infinite;
}

.spinnerP-3b{
    content: "";
    display: block;
    width: 2px;
    height: 44px;
    background: #8B8C8E;
    border-radius: 4px;
    position: absolute;
    top: 50%;
    bottom: 50%;
    margin-top: -44px;
    margin-left: 43px;
    transform-origin: bottom center;
    animation: spin 24s linear infinite;

}

.spinnerP-4 {
    text-align: center;
    width: 100px;
    height: 100px;
    background: #e0e0e0;
    border-radius: 20%;
    position: relative;
    margin: 50px;
    display: inline-block;
}

.spinnerP-4a {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    animation: pulse 2s linear infinite;
    margin-top: 50px;
    opacity: 0;
}

.spinnerP-4b {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    margin-left: -35px;
    animation: pulse 3.2s linear 2.3s infinite;
    opacity: 0;
}

.spinnerP-4c {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    animation: pulse 2.5s linear 2s infinite;
    margin-top: 40px;
    margin-left: 45px;
    opacity: 0;
}

.spinnerP-4d {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    animation: pulse 3s linear 2.8s infinite;
    margin-top: -20px;
    opacity: 0;
}

@keyframes pulse {
    0% {transform: scale(0);}
    0% {opacity: 0;}
    100% {transform: scale(1.3)}
    100% {opacity: 1;}
}

.spinnerP-5 {
    text-align: center;
    width: 0;
    height: 0;
    background: #e0e0e0;
    border-radius: 50%;
    position: relative;
    margin: 50px;
    display: inline-block;
}

.spinnerP-5a {
    display: block;
    height: 20px;
    width: 20px;
    position: absolute;
    left: -40px;
    animation: bounce 1s ease-in-out infinite;
}

.spinnerP-5b {
    display: block;
    height: 20px;
    width: 20px;
    position: absolute;
    animation: bounce 1s ease-in-out 0.33s infinite;
}

.spinnerP-5c {
    display: block;
    height: 20px;
    width: 20px;
    position: absolute;
    left: 40px;
    animation: bounce 1s ease-in-out 0.66s infinite;
}

@keyframes bounce {
    0%, 75%, 100% {transform: translateY(0px);}
    25% {transform: translateY(-30px);}
}

.spinnerP-6 {
    text-align: center;
    width: 100px;
    height: 100px;
    background: #e0e0e0;
    border-radius: 50%;
    position: relative;
    margin: 50px;
    display: inline-block;
    border: 4px solid #8B8C8E;
    opacity: 0;
    animation: pulsing 2.5s ease-out infinite;
}

.spinnerP-6a {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    margin-top: 15px;
    margin-left: -5px;
    animation: twist 5s linear infinite;
}

@keyframes pulsing {
    0% {transform: scale(0.6)}
    0% {opacity: 0}
    5% {transform: scale(0.5)}
    40% {transform: scale(0.8)}
    50% {opacity: 1}
    45% {transform: scale(0.7)}
    100% {opacity: 0}

}
@keyframes twist {
    0% {transform: rotateY(0deg)}
    100% {transform: rotateY(360deg)}
}

/* end Spinners Piersma.COM */

/* ------------------ */
/* framework searching indicator */
/* ------------------ */

.searching_indicator_style {
    position: fixed;
    bottom: 10px;
    right: 15px;
    background-color: #f2f2f2;
    border-radius: 10px;
    z-index: 100;
}

.searching_indicator_style .f_spinner_4 {
    z-index: 101;
    margin-top: 20px;
}

.searching_indicator_style .spinner-text {
    font-weight: bold;
    font-size: 12px;
    z-index: 101;
    margin-bottom: 20px;
    margin-top: -35px;
}

/* end framework searching indicator */