.api_content {
        position: fixed;
        right: 1.5%;
        /*bottom: 217px;*/
        bottom: 0;
        z-index: 10;
        width: 490px;
        top: inherit;

        -o-transform-origin: 100% 100% ;
        -moz-transform-origin: 100% 100% ;
        -webkit-transform-origin: 100% 100% ;
        -ms-transform-origin: 100% 100% ;
        transform-origin: 100% 100% ;
        -webkit-filter: blur(0);
    }
    .api_wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        float: left;
        top: 0;
        left: 0;
    }
    .play_api:hover {
        height: 100px !important;
        transition: all 0.2s ease 0s;
        -moz-transition: all 0.2s ease 0s;
        -webkit-transition: all 0.2s ease 0s;
        -ms-transition: all 0.2s ease 0s;
        -o-transition: all 0.2s ease 0s;
    }
    .play_api.hide {
        height: 0px;
        transition: all 0.5s ease 0s;
        -moz-transition: all 0.5s ease 0s;
        -webkit-transition: all 0.5s ease 0s;
        -ms-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
    }
    .play_api {
        position: absolute;
        height: 84px;
        width: 152px;
        bottom: 0;
        right: 0px;
        padding-top: 9px;
        text-align: center;
        -ms-box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.34);
        cursor: pointer;
        transition: all 0.2s ease 0s;
        -moz-transition: all 0.2s ease 0s;
        -ms-transition: all 0.2s ease 0s;
        -o-transition: all 0.2s ease 0s;

    }
  
  img.icon-call {
        width: 120px;
        max-width: 120px;
        background: transparent;
    }
    .title_api .imagecall {
        position: absolute;
        right: -40px;
        width: auto;
        top: -7px;
    }
    img.call-second {
        position: relative;
        top: 0;
        width: 120px;
        left: 0;
        max-width: 157px;
    }
    /* img.call-troi{
        width: 103px;
        margin-left: -30px;
        margin-top: -8px;
        max-width: 103px;
    } */
    .question strong {
        font-family: Source Sans Pro,sans-serif;
        color: white;
        font-size: 18px;
        text-transform: uppercase;
        font-weight: 100;
    }
    .headercall .question strong {
        line-height: 40px;
    }
    .question p {
        text-align: left;
        color: #ffffff;
        margin-top: 24px;
        margin-left: 8px;
        font-size: 15px;
    }
    span.btnblb.callbtn {
        display: inline-block;
        text-align: center;
        background: #f79520;
        text-transform: uppercase;
        padding: 8px 15px;
        color: #ffffff;
        margin: 5px;
        border: 1px solid #f79520!important;
    }
    span.btnblb.callbtn:hover {
        background-color: #fff;
        border: 1px solid #f79520!important;
        color: #f79520!important;
    }
    .imagecall {
        padding: 0;
    }

    .api_fixed {
        background: none repeat scroll 0 0 #fff;
        background: none repeat scroll 0 0 rgba(255, 255, 255, 0.9);
        box-shadow: 0 0 18px rgba(0, 0, 0, 0.5);
        position: fixed;
        transition: left 0.5s ease 0s;
        -moz-transition: left 0.5s ease 0s;
        -webkit-transition: left 0.5s ease 0s;
        -ms-transition: left 0.5s ease 0s;
        -o-transition: left 0.5s ease 0s;
        z-index: 10;
        width: 345px;
        right: 5%;
    }

    .api_fixed .label_succes {
        color: green;
        display: block;
        position: relative;
        text-align: center;
        top: -2px;
        margin-top: 20px;
        clear: both;
    }
    .api_fixed sup {
        top: -25px;
        right: -30px;
    }

    .iman_call{
        opacity: 0;
        display: inline;
        display: inline-block;
        transition:opacity 0.5s ease 0s;
        -moz-transition:opacity 0.5s ease 0s;
        -webkit-transition:opacity 0.5s ease 0s;
    }

    .iman_call.opacity{
        opacity: 1;
        transition:opacity 0.5s ease 0s;
        -moz-transition:opacity 0.5s ease 0s;
        -webkit-transition:opacity 0.5s ease 0s;
    }

    .api_fixed header {
        position: relative;
        width: inherit;
    }

    .api_fixed header .imagetitle_api {
        background: url("../images/bg-api.jpg") no-repeat scroll left top #565b7e;
        display: inline-block;
        padding: 3px 22px 5px 50px;
        vertical-align: top;
    }

    .title_api {
        cursor: pointer;
        display: inline-block;
        margin: 0 -5px 0 0;
        padding: 0;
        width: 23%;
        height: auto;
        position: absolute;
        bottom: -225px;
        right: 0;
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }
    .title_api:hover {
        width: 100%;
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    .title_api p{
        margin: 0;
    }

    .api_fixed header .close-api {
        right: -18px;
        padding: 0;
        position: absolute;
        top: -1px;
    }

    #ui-datepicker-div table {margin-bottom: 0;}

    .api_fixed input {
        background: none repeat scroll 0 0 #f0f0f0;
        border-radius: 0;
        box-shadow: 0 0;
        color: #333;
        display: block;
        border: none;
        outline: none;
        top: 0;
        left: 0;
        display: block;
        background: transparent;
        z-index: 2;
        border: 1px solid #cacaca;
        height: 48px;
    }


    .api_fixed section {
        position: absolute;
        bottom: 25px;
        display: none;
        background: #ffffff;
        box-shadow: 0 0 18px rgba(0, 0, 0, 0.5);
        padding: 25px;
        z-index: 9;
        width: 467px;
        overflow: hidden; 
        right: -10%;
    }
    .api_fixed input[type="radio"] {
        display: inline-block;
        margin: 0 6px 0 0;
        width: auto;
        opacity: 0;
        position: absolute;
        left: 1px;
        width: 25px;
        top: -2px;
    }

    .api_fixed label {
        display: inline-block;
        letter-spacing: -0.5px;
        margin-top: 12px;
    }

    .api_fixed .btn {
        border-color: #f79520 !important;
        background: #f79520 !important;
        color: #FFFFFF !important;
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        transition: all 0.3s ease;
        display: inline-block;
        font-weight: normal;
        text-align: center;
        vertical-align: middle;
        touch-action: manipulation;
        cursor: pointer;
        padding: 10px 12px;
        font-size: 14px;
        line-height: 1.42857;
        border-radius: 0;
        height: 39px !important;
        width: 225px;
        padding-left: 40px !important;
        padding-right: 40px !important;
        margin: 0 auto;
        display: block;
    }
    .api_fixed .btn:hover {
        border: 1px solid #f79520 !important;
        background: #FFFFFF !important;
        color: #f79520 !important;
        height: 39px !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    .api_fixed .hasDatepicker:hover {cursor: pointer !important;}

    pre {
        display: none;
    }

    .api_fixed #basic_example_1 {
        display: inline-block;
        width: 68%;
        vertical-align: top;
        margin-top: 7px;
    }
    .form-group.radio-container:nth-of-type(2) {
        margin-bottom: 20px;
    }

    /****** date picker *********/

    #ui-datepicker-div {
        background: none repeat scroll 0 0 #fff;
        background: none repeat scroll 0 0 rgb(242, 242, 242);
        border-radius: 0;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
        font-family: "open sans",sans-serif !important;
        right: 50%;
        left: 0px;
        bottom: 80px;
        left: initial !important;
        top: initial !important;
        width: 400px;
        max-width: 100%;
        -o-transform-origin: 100% 100%;
        -moz-transform-origin: 100% 100%;
        -webkit-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
        padding: 0;
        position: absolute !important;
        -o-transform: translateX(50%);
        -moz-transform: translateX(50%);
        -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
        transform: translateX(50%);x
    }
    img#load-callback {
        position: absolute;
        display: block;
        z-index: 88888;
        top: inherit;
        left: inherit;
        opacity: 1;
        right: 75px;
        bottom: 30px;
    }
    @media (min-width: 1300px) {
        #ui-datepicker-div {right: 50%;}
    }
    @media (min-width: 1900px) {
        #ui-datepicker-div {right: 55%;}
    }
    @media (max-width: 1024px) {
        .title_api .question .question strong {font-size: 17px;}
    }
    @media (max-width: 800px) {
        .api_fixed{right: 10%;}
        #ui-datepicker-div {right: 50%;}
        .api_content{
            -o-transform: scale(0.9);
            -moz-transform: scale(0.9);
            -webkit-transform: scale(0.9);
            -ms-transform: scale(0.9);
            transform: scale(0.9);
        }
    }
    @media (max-width: 640px) {
        .api_content{
            -o-transform: scale(0.7);
            -moz-transform: scale(0.7);
            -webkit-transform: scale(0.7);
            -ms-transform: scale(0.7);
            transform: scale(0.7);
        }
    }
    @media (max-width: 500px) {
        .api_content{
            -o-transform: scale(0.6);
            -moz-transform: scale(0.6);
            -webkit-transform: scale(0.6);
            -ms-transform: scale(0.6);
            transform: scale(0.6);
        }
    }

    .ui-datepicker-header {
        background: #3598dc;
        color: #fff;
        border: 1px solid #3598dc;
        border-radius: 0;
    }
    .ui-state-default, .ui-widget-content .ui-state-default, .ui-state-hover, .ui-widget-header .ui-state-default {
        border: none;
        padding: 10px;
        text-align: center;
    }
    .ui-datepicker th {
        background: #ffffff !important;
        color: #5c6266 !important;
    }
    .ui-datepicker-calendar th span {
        color: #5c6266 !important;
        font-weight: 600;
    }
    .ui-state-default.ui-state-active {
        background: #3598dc !important;
        color: #ffffff !important;
        border-radius: 100%;
        /* width: 40px; */
        /* height: 40px; */
        font-weight: bold;
        padding: 5px 7px;
        display: inline;
    }
    table tbody tr:nth-child(even) {background: #ffffff;}
    .ui-datepicker td {text-align: center; }
    .ui-datepicker-calendar td a {
        color: #54587c!important;
    }
    a.ui-state-default.ui-state-highlight:not(.ui-state-active) {
        font-weight: 800;
    }
    .ui-datepicker-calendar td a {
        /*border: 1px solid #b3b7db !important;*/
        color: #54587c !important;
    }
     .ui-state-default:not(.ui-state-active){
        background: none !important;
    }

    .ui-timepicker-div {
        padding: 0px;
        float: left;
        width: 100%;
    }

    .ui-timepicker-div dt {
        font-weight: 600;
        font-size: 0.9em;
    }
    .ui-timepicker-div .custom-col-1 {
        float: left;
        width: 25%;
        padding: 5px;
        background: #e2e3e3;
        height: 120px;
        padding: 20px 3%;
    }
    .ui-timepicker-div .custom-col-2 {
        padding: 5px;
        float: left;
        width: 75%;
    }

    .ui_tpicker_time {
        color: #5a5e82;
        font-weight: 300;
        font-size: 22px;
    }
    .ui-slider-handle.ui-state-default.ui-corner-all {
        background: #f79520 !important;
        border: 1px solid #f79520;
        border-radius: 100%;
        top: -10px;
    }
    dd.ui_tpicker_hour, dd.ui_tpicker_minute {
        margin-bottom: 17px;
        padding: 0px 8px;
    }
    .ui-slider-handle.ui-state-default.ui-corner-all {
        background: #3598dc !important;
        border: none;
    }
    .ui-datepicker .ui-datepicker-buttonpane {
        width: 100%;
        float: left;
        margin-top: 0;
        padding-bottom: 5px;
    }

    .ui_tpicker_time_label {
        color: #3498db;
        font-size: 21px !important;
    }
    .ui-timepicker-div > dl {
        padding: 0;
        margin-bottom: 0;
        float: left;
        width: 100%;
    }
    .ui-datepicker-close.ui-state-default.ui-priority-primary.ui-corner-all {
        background: #f79520 !important;
        color: #fff;
        border-radius: 0;
        border: none;
        font-family: 'open sans',sans-serif;
        text-transform: uppercase;
        font-weight: 400;
        font-size: 19px;
        padding: 10px 28px;
        margin-top: 15px;
        margin-right: 15px;
    }

    .ui-datepicker-current.ui-state-default.ui-priority-secondary.ui-corner-all {
        border-radius: 0;
        font-family: 'open sans',sans-serif;
        background: #ffffff !important;
        color: #f79520;
        border-radius: 0;
        border: none;
        font-family: 'open sans',sans-serif;
        padding: 10px 28px;
        text-transform: uppercase;
        font-weight: 400;
        font-size: 15px;
        border: 1px solid #f79520;
        margin-top: 15px;
        margin-left: 15px;
    }
    .ui-slider.ui-slider-horizontal {
        height: 3px;
        background: #b5b6b7;
        margin-top: 10px;
    }
    .ui-icon, .ui-widget-content .ui-icon, .ui-widget-header .ui-icon {
        background-image: url(../img/arrow-call.png)
    }
    .api_fixed form {
        margin: 0;
    }
    .ui-widget-header .ui-state-hover {
        border: 1px solid rgba(153, 153, 153, 0.0);
        background: none !important;
        font-weight: 400;
        color: #212121;
    }
    .ui-datepicker .ui-datepicker-next span, .ui-datepicker .ui-datepicker-prev span {
        display: block;
        position: absolute;
        left: 50%;
        margin-left: -8px;
        top: 30%;
        margin-top: -8px;
        width: 40px;
        height: 30px;
        display: block;
        background-position: 3px 4px;
    }
    .ui-datepicker .ui-datepicker-prev span {
        background-position: 3px 4px;
    }
    .ui-datepicker .ui-datepicker-next span {
        background-position: -57px 4px;
    }
    #erreur_contact .wght-bold, #confirmation_contact .wght-bold {
        margin-top: 50px;
    }

    #erreur_contact .btn, #confirmation_contact .btn {
        background: #565B7E;
        color: #fff;
    }

    .ui_tpicker_hour_label, .ui_tpicker_minute_label {
        font-weight: 500!important;
        font-size: 15px !important;
        margin: 0 0 3px;
    }
    span#call_error {
        color: red;
        display: block;
        position: relative;
        text-align: center;
        top: -2px;
        margin-top: 20px;
        clear: both;
    }
    .fermer:hover{
        color: #FFFFFF;
    }

    .icon-fone {
        padding: 0 13px 0 12px;
        display: inline;
        display: inline-block;
    }
    .headercall {
        background: #f79520;
        width: 112%;
        margin-left: -25px;
        margin-top: -25px;
        height: 65px;
        padding: 10px 15px;
    }
    input.hasDatepicker {background: url(../img/calendar.png) 8px center no-repeat; padding-left: 40px;}
    .headercall a.fermer {
        position: absolute;
        top: 10px;
        color: rgba(255, 255, 255, 0.98);
        right: 20px;
        font-size: 16px;
        font-family: 'open sans';
        -o-transform: scaleX(2) scaleY(1.4);
        -moz-transform: scaleX(2) scaleY(1.4);
        -webkit-transform: scaleX(2) scaleY(1.4);
        -ms-transform: scaleX(2) scaleY(1.4);
        transform: scaleX(2) scaleY(1.4);
        font-weight: 100;
    }
    .title_api a.fermer {
        position: absolute;
        top: 10px;
        color: rgba(255, 255, 255, 0.98);
        right: 20px;
        font-size: 16px;
        font-family: 'open sans';
        -o-transform: scaleX(2) scaleY(1.4);
        -moz-transform: scaleX(2) scaleY(1.4);
        -webkit-transform: scaleX(2) scaleY(1.4);
        -ms-transform: scaleX(2) scaleY(1.4);
        transform: scaleX(2) scaleY(1.4);
        font-weight: 100;
    }
    .title_api .question {
        padding: 0;
        overflow: hidden;
    }
    .title_api .question .slider-text * {
        opacity: 0;
        white-space: nowrap;
        transition: all 0.2s ease 0s;
        -moz-transition: all 0.4s ease 0s;
        -webkit-transition: all 0.4s ease 0s;
        -ms-transition: all 0.4s ease 0s;
        -o-transition: all 0.4s ease 0s;
    }
    .title_api:hover .question .slider-text * {
        opacity: 1;
        transition: all 0.2s ease 0s;
        -moz-transition: all 0.4s ease 0s;
        -webkit-transition: all 0.4s ease 0s;
        -ms-transition: all 0.4s ease 0s;
        -o-transition: all 0.4s ease 0s;
    }
    .title_api .question .slider-text {
        padding: 8px 80px 10px 7px;
        text-align: center;
        background: #3598dc;
        position: relative;
        border-radius: 50px;
        transition: all 0.2s ease 0s;
        -moz-transition: all 0.4s ease 0s;
        -webkit-transition: all 0.4s ease 0s;
        -ms-transition: all 0.4s ease 0s;
        -o-transition: all 0.4s ease 0s;
        -moz-box-shadow: 0 0px 10px 2px rgba(0, 0, 0, 0.23);
        -ms-box-shadow: 0 0px 10px 2px rgba(0, 0, 0, 0.23);
        -o-box-shadow: 0 0px 10px 2px rgba(0, 0, 0, 0.23);
        -webkit-box-shadow: 0 0px 10px 2px rgba(0, 0, 0, 0.23);
        box-shadow: 0 0px 10px 2px rgba(0, 0, 0, 0.23);
        max-height: 97px;
        padding-left: 25px;
    }
    
    .title_api:hover .question .slider-text {
        padding: 8px 80px 10px 7px;
        text-align: center;
        background: #3598dc;
        right: 0px;
        position: relative;
        border-radius: 0px;
        padding-left: 15px;
        transition: all 0.4s ease 0s;
        -moz-transition: all 0.4s ease 0s;
        -webkit-transition: all 0.4s ease 0s;
        -ms-transition: all 0.4s ease 0s;
        -o-transition: all 0.4s ease 0s;
    }
    

    .headercall .question p {
        text-align: left;
        color: #5c6266;
        margin-top: 24px;
        margin-left: 0px;
        font-size: 15px;
    }
    .titre {
        width: 93%;
        text-align: center;
        padding-top: 9px;
        font-size: 18px;
        font-family: Open Sans;
        color: #ffffff;
    }
    .form-group.radio-container {
        width: 100%;
        float: left;    
        padding-left: 35px;
        position: relative;
    }
    .form-group.radio-container::after {
        content: '';
        position: absolute;
        width: 25px;
        height: 25px;
        background: url(../img/radio.jpg) no-repeat 50% 0;
        top: 10px;
        left: 0px;
    }
    .form-group.radio-container.checked::after {
        background: url(../img/radio.jpg) no-repeat 50% -60px;
    }
    .form-group.radio-container input{
        float: left;
    }
    .overlay {
        position: absolute;
        top: 0;
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10;
        left: 0;
        display: none;
    }

    /*-----------------------*/
    

    /*---animation---*/
  
.animated-api { 
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: 10;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-fill-mode: forwards;
    
    animation-duration: 4s;
    animation-iteration-count: 10;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;

}   
.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
}
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
    40% {-webkit-transform: translateY(-10px);}
    60% {-webkit-transform: translateY(-5px);}
} 
@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
    40% {-moz-transform: translateY(-10px);}
    60% {-moz-transform: translateY(-5px);}
} 
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
} 
/*
 * Adding the animation to our element
*/