/*radial out*/

.radial-out {
    color: #f05443;
    border-color: #f05443 !important;
    background: transparent;
    /*padding: 10px 20px;*/
    /*border-radius: 6px;*/
    border-width: 2px;
    border-style: solid;
    /*font-size: 20px;*/
    /*font-family: 'Ubuntu', sans-serif;*/
    cursor: pointer;
    transition: 0.25s ease;
}

.radial-out::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: #f05443;
    width: 121%;
    padding-top: 109%;
    transition: 0.25s ease;
}

.radial-out::after {
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}

.radial-out {
    position: relative;
    overflow: hidden;
}

.radial-out > span{
    position: relative;
    z-index: 1;
}
.radial-out > input {
    position: relative;
    z-index: 1;
}

.radial-out {
    color: #FFF;
}

.radial-out::after{
    border-radius: 999px;
    top: 100%;
}

.radial-out:hover{
    color: #f05443; 
}

.radial-out:hover:after{
    top: 300%;
}

/* ---------------- For Animation on Scroll ---------------- */
.slideanim {
    visibility:hidden;
    visibility:visible\9;/*For old IE browsers IE6-8 */
}
.slideanim.slide {visibility: visible; animation:slide 1s;}
.slideanim::after {
    /* useful when its child elements are float:left; */
    content: "";
    display: table;
    clear: both;
}

@keyframes slide {
    0% {
        opacity: 0;
        transform: translateY(50%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/*animation card hover*/
.style_prevu_kit
{
    position: relative;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1);
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);

}
.style_prevu_kit:hover
{
    box-shadow: 0px 0px 50px #000000;
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.2);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.2);
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.2);
    transition: all 200ms ease-in;
    transform: scale(1.2);
}

/*button submit animation*/
.onclic {
    width: 32px;
    height: 32px;
    border-radius: 100% !important;
    border-color: #bbbbbb !important;
    border-width: 3px;
    border-style: solid;
    font-size: 0;
    padding: 0;
    border-left-color: #f05443 !important;
    -webkit-animation: rotating 2s 0.25s linear infinite;
    animation: rotating 2s 0.25s linear infinite;
}
.onclic:hover {
    color: #f05443;
    background: transparent;
}

.validate {
    font-size: 13px;
    color: white;
    background: #f05443;
}

@-webkit-keyframes rotating {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotating {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}