/* common */
body {
    background-color: #F7F7F8;
    font-family: Arial;
}
.main {
    line-height: 1.5rem;
    font-size: 1rem;
}
.page-title {
    font-size: 2rem;
}
.card,
.rounded {
    padding: 0.5rem 0;
    border-radius: 0.5rem;
    border: none;
}
.title {
    text-transform: uppercase;
}
.modal-dialog .dropzone {
    border: 1px solid #dee2e6;
}
.txt-bg {
    background-color: rgba(0, 0, 0, 0.5);
}
@media only screen and (min-width: 540px) {
    .menu-recrutement a{
        background-color: #212529;
        border-color: #212529;
        color: #fff!important;
        padding-right: 1rem!important;
        padding-left: 1rem!important;
    }
}
/* button see next */
.rounded-circle.button-right-arrow {
    padding: 4px;
}
.rounded-circle.button-right-arrow::after {
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -0.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f138";
}
.button-right-arrow.dark {
    color: black;
    background-color: white;
    margin: 2px;
    padding: 2px;
}
/* fin button see next */
/* home page */
.hp .category1 {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.90)),
    url("../img/hp/category1_formation.jpg?1");
}
.hp .category2 {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.90)),
    url("../img/hp/category2_executive_search.jpg?1");
}
.hp .category3 {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.90)),
    url("../img/hp/category3_digital.jpg?1");
}
.hp .category4 {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.90)),
    url("../img/hp/category4_actuariant_finance.jpg?1");
}
.hp .category1,
.hp .category2,
.hp .category3,
.hp .category4 {
    min-height: 400px;
    background-position: center center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}
.hp .btn-dark.btn-tag {
    background-color: transparent;
    border-color: white;
}
.hp.breadcrumb a {
    color: black;
    text-decoration: none;
}
.hp.breadcrumb .button-right-arrow {
    background: none;
    border: 1px solid black;
}
/* fin home page */

/* job board page */
.total-jobs {
    font-size: 1.5rem;
}

.jobs .card p.card-text {
    font-family: Arial;
    line-height: 1.15rem;
}
.jobs .card{
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
    transition: .5s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
    cursor: pointer;
    min-width: 100%;
}
.jobs .card:hover{
    box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}

/* digital page */
.card.dark {
    background-color:#000;
}
.card.dark .rounded-circle {
    width: 15px;
    height:15px;
    background-color:#fff;
    position: absolute;
    top:15px;
    right: 15px;
}
.digital-image-card {
    padding: 0.5rem 0;
    border-radius: 0.5rem;
    border: none;
    background-repeat : no-repeat;
    background-size: cover;
    min-height: 450px;
}
.digital-image-card.edf-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/digital/card-edf2.jpg");
    min-height: 39rem;
}
.digital-image-card.edf-card .logo{
    margin: 5rem;
}
.digital-image-card.societe-generale-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/digital/card-edf.jpg");
    min-height: 39rem;
}
.digital-image-card.societe-generale-card .logo{
    margin: 5rem;
}

.digital-image-card.axa-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/digital/card-axa.jpg");
    min-height: 39rem;
}
.digital-image-card.edf-card .logo{
    margin: 5rem;
}

.digital-image-card.carrefour-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/digital/card-carrefour.jpg");
    min-height: 39rem;
    padding-top: 19rem;
}
.digital-image-card.total-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/digital/card-total.jpg");
    min-height: 39rem;
    padding-top: 19rem;
}
.digital-image-card.generali-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/digital/card-generali.jpg");
    min-height: 39rem;
    padding-top: 19rem;
}
.digital-image-card.decathlon-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/digital/card-decalthon.jpg");
    min-height: 39rem;
    padding-top: 19rem;
}
.digital-image-card.sncf-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/digital/card-sncf.jpg");
    min-height: 39rem;
    padding-top: 19rem;
}
.btn-digital-arrow-white {
    float: right;
    padding: 0.1rem 0.25rem;
}
/*service */
.service .card-service {
    background-image: url("../img/digital/digital-service-bg.jpg");
    background-size: cover;
    min-height: 22rem;
}
.service .card-service .w-33 {
    width: 100%;
}
@media only screen and (min-width: 540px)  {
    .service .card-service .w-33 {
        width: 33%;
    }
}

/* recroutement page */
.card .number-absolute {
    position: absolute;
    top:15px;
    right: 15px;
    font-size: 2rem;
}
/* group page */
.image-card{
    padding: 0.5rem 0;
    border-radius: 0.5rem;
    border: none;
    background-repeat : no-repeat;
    background-size: cover;
    min-height: 19rem;
}
.image-card.generali-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/digital/card-generali.jpg");
}
.image-card.axa-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/digital/card-generali.jpg");
}
.image-card.edf-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/digital/card-edf2.jpg");
}
.image-card.bnp-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/digital/card-bnp.jpg");
}
.image-card.grand-paris-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/digital/card-grand-paris.jpg");
}

.image-card.schneider-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/digital/card-schneider.jpg");
    padding-top: 5rem;
}
.image-card.carrefour-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/digital/card-carrefour.jpg");
}
.image-card.societe-generale-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/digital/card-generali.jpg");
}
.image-card.total-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/digital/card-total.jpg?");
}
.image-card.societe-generale-card-no-text {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/digital/card-generali.jpg");
    padding-top: 6rem;
}
.image-card.decathlon-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/digital/card-decalthon.jpg");
}
.image-card.collaboration-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/about/about-collaboration.jpg");
}
.image-card.engagement-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/about/about-engagement.jpg");
}
.image-card.ethique-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/about/about-ethique.jpg");
}
.image-card.excellence-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/about/about-excelence.jpg");
}
.image-card.afterwork-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/jobs/1.jpg");
}
.image-card.reconnaissance-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/jobs/2.jpg");
}
.image-card.team-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/jobs/3.jpg");
}
.image-card.formation-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/jobs/4.jpg");
}
@media only screen and (min-width: 960px)  {
    .service .card.dark
    {
        min-height: 39rem;
    }
}
@media only screen and (min-width: 540px)  {
    .image-card.collaboration-card,
    .image-card.excellence-card,
    .image-card.afterwork-card,
    .image-card.formation-card
    {
        min-height: 39rem;
    }
    .service .card.dark.digital
    {
        min-height: 30rem;
    }
}


/* group page */
.group-image-card {
    padding: 0.5rem 0;
    border-radius: 0.5rem;
    border: none;
    background-repeat : no-repeat;
    background-size: cover;
}
/*.group-image-card.axa-card,*/
.group-image-card.conanjeken-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/digital/card-axa.jpg");
    /*min-height: 39rem;*/
}
.group-image-card.conanjeken-card img{
    margin-bottom: 10rem;
}
.group-image-card.sncf-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/digital/card-sncf.jpg");
    /*min-height: 19rem;*/
}
.group-image-card.routard-card .logo{
    margin: 5rem;
}
.group-image-card.schneider-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/digital/card-schneider.jpg");
    /*min-height: 19rem;*/
}
.group-image-card.finance-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/actuariat/card-finance.jpg");
    min-height: 19rem;
    padding-top: 9rem;
}
@media only screen and (min-width: 960px)  {
    .group-image-card.conanjeken-card
    {
        min-height: 39rem;
    }
    .group-image-card.schneider-card,
    .group-image-card.sncf-card
    {
        min-height: 19rem;
    }
    .card-project-digital {
        min-height: 39rem;
    }
}
@media only screen and (min-width: 540px)  {

}

/* category page */
.category .card.dark .h2{
    margin: 0;
}

/* board page */
.board {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.73)),
    url("../img/board.png");
    background-size: cover;
}
/* header bg page service */
.header {
    min-height: 22rem;
}
@media only screen and (min-width: 540px)  {
    .board {
        min-height: 22rem;
    }
    .header {
        min-height: 40rem;
    }
}

/* about page */
.blur{
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
}
/* slide logos about page */
.logos-slide .container {
    overflow: hidden;
}
.logos-slide .container  .slider {
    animation: slidein 30s linear infinite;
    white-space: nowrap;
}
.logos-slide .container  .slider .logos {
    width: 100%;
    display: inline-block;
    margin: 0px 0;
}
.logos-slide .container  .slider .logos img{
    width: 10rem;
}

@keyframes slidein {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/** slide logos about page */
/** */
.logos-service .logos-service-item {
    width: 5rem;
    height: 5rem;
}

.block-our-values .section .desc {
    flex: 1;
}
.block-our-values .section {
    display: flex;
    flex: 1;
    flex-direction: column;
}

/* tabs */
.left-tabs.sideways-tabs,.right-tabs.sideways-tabs{
    margin-top:5rem;
    border:none;
    position:relative;
    margin-bottom:0
}
.left-tabs.nav-tabs,.left-tabs.sideways-tabs,.right-tabs.nav-tabs,.right-tabs.sideways-tabs{
    height:100%;
    flex-direction:column
}
.ellipsis{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    padding-right:.5rem
}
.vtabs .tab-clickable{
    cursor:pointer
}
.left-tabs.nav-tabs{
    border-right:1px solid #dee2e6;
    border-bottom:none
}
.left-tabs .nav-link{
    border-top-left-radius:.25rem;
    border-bottom-left-radius:.25rem;
    border-bottom-right-radius:0;
    border-top-right-radius:0;
    margin-right:-1px;
    text-align:left
}
.left-tabs .nav-link:hover{
    border:none;
}
.left-tabs .nav-link.active{
    border-top:1px solid #dee2e6;
    border-right:1px solid transparent;
    border-bottom:1px solid #dee2e6;
    border-left:1px solid #dee2e6;
    color:#000000;
    background: none;
    border: none;
    font-weight: 700;
}
.left-tabs .nav-link.active::before {
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -0.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f138";
}
.left-tabs .nav-tabs .nav-link {
    border:none;
    color: #888888;
}

.left-tabs .nav-tabs .nav-link:hover {
    border:none
}
.right-tabs.nav-tabs{
    border-left:1px solid #dee2e6;
    border-bottom:none
}
.right-tabs .nav-link{
    border-top-right-radius:.25rem;
    border-bottom-right-radius:.25rem;
    border-bottom-left-radius:0;
    border-top-left-radius:0;
    margin-left:-1px;
    text-align:right
}
.right-tabs .nav-link:hover{
    border-left:1px solid transparent
}
.right-tabs .nav-link.active{
    border-top:1px solid #dee2e6;
    border-right:1px solid #dee2e6;
    border-bottom:1px solid #dee2e6;
    border-left:1px solid transparent
}
.left-tabs.sideways-tabs{
    border-right:none;
    left:-3.2rem
}
.sideways-tabs.left-tabs .nav-item{
    transform:rotate(-90deg);
    height:1rem;
    margin-bottom:calc(8rem - 1rem)
}
.sideways-tabs.left-tabs .nav-link{
    width:8rem;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    border-top-right-radius:.25rem;
    border-bottom-right-radius:0;
    border-bottom-left-radius:0;
    border-top-left-radius:.25rem;
    border-bottom:1px solid #dee2e6
}
.sideways-tabs.left-tabs .nav-link:hover{
    border-right:1px solid #e9ecef
}
.sideways-tabs.left-tabs .nav-link.active{
    border-top:1px solid #dee2e6;
    border-right:1px solid #dee2e6;
    border-bottom:1px solid transparent;
    border-left:1px solid #dee2e6;
    color:#000000;
}
.right-tabs.sideways-tabs{
    border-left:none;
    right:3.2rem
}
.sideways-tabs.right-tabs .nav-item{
    transform:rotate(90deg);
    height:1rem;
    margin-bottom:calc(8rem - 1rem)
}
.sideways-tabs.right-tabs .nav-link{
    width:8rem;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    border-top-right-radius:.25rem;
    border-bottom-right-radius:0;
    border-bottom-left-radius:0;
    border-top-left-radius:.25rem;
    border-bottom:1px solid #dee2e6
}
.sideways-tabs.right-tabs .nav-link:hover{
    border-left:1px solid #e9ecef
}
.sideways-tabs.right-tabs .nav-link.active{
    border-top:1px solid #dee2e6;
    border-right:1px solid #dee2e6;
    border-bottom:1px solid transparent;
    border-left:1px solid #dee2e6
}
.vtabs .accordion-header{
    display:none
}
@media (max-width:767px){
    .left-tabs.nav-tabs{
        flex-direction:row;
        border-right:none;
        border-left:none;
        min-width:100%;
        border-bottom:1px solid #dee2e6;
        left:auto;
        margin-top:auto
    }
    .left-tabs .nav-link{
        width:8rem;
        text-align:center;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        border-top-right-radius:.25rem;
        border-bottom-right-radius:0;
        border-bottom-left-radius:0;
        border-top-left-radius:.25rem;
        margin-right:0;
        margin-bottom:-1px
    }
    .left-tabs .nav-link.nav-link:hover{
        border-right-color:#dee2e6;
        border-bottom-color:transparent;
    }
    .left-tabs .nav-link.active{
        border-top-color:#dee2e6;
        border-right-color:#dee2e6;
        border-bottom-color:transparent;
        border-left-color:#dee2e6;
    }
    .sideways-tabs.left-tabs .nav-item,.sideways-tabs.right-tabs .nav-item{
        transform:none;
        height:auto;
        width:auto;
        margin-bottom:0
    }
    .right-tabs.nav-tabs{
        flex-direction:row;
        border-right:none;
        border-left:none;
        min-width:100%;
        border-top:1px solid #dee2e6;
        right:auto;
        margin-top:auto
    }
    .right-tabs .nav-link,.sideways-tabs.right-tabs .nav-link{
        width:8rem;
        text-align:center;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        border-top-right-radius:0;
        border-bottom-right-radius:.25rem;
        border-bottom-left-radius:.25rem;
        border-top-left-radius:0;
        margin-left:0;
        margin-top:-1px;
        border-bottom-color:transparent
    }
    .right-tabs .nav-link:hover{
        border-top-color:transparent;
        border-left-color:#dee2e6;
        border-bottom-color:#e9ecef
    }
    .right-tabs .nav-link.active,.sideways-tabs.right-tabs .nav-link.active{
        border-top-color:transparent;
        border-right-color:#dee2e6;
        border-bottom-color:#dee2e6;
        border-left-color:#dee2e6
    }
}
@media (max-width:428px){
    .left-tabs.nav-tabs{
        display:none
    }
    .right-tabs.nav-tabs{
        display:none
    }
    .vtabs .tab-content>.tab-pane{
        display:block!important;
        opacity:1
    }
    .vtabs .accordion-header{
        display:block
    }
    .vtabs button.accordion-button:focus{
        border:none;
        outline:0;
        box-shadow:none
    }
}
@media (min-width:429px){
    .vtabs .accordion-item{
        border:none
    }
    .vtabs .accordion-body.collapse{
        display:block
    }
}
.tab-content{
    padding:1rem
}
/* my add*/
.accordion-item {
    background:none;
}
.vtabs .nav-link {
    color: #888888;
    font-weight: 700;
}
.digital .img-bg-top {
    background-image: url("../img/digital/digital-bg.jpg");
    background-size: cover;
}
.digital.devops .img-bg-top {
    background-image: url("../img/digital/header-devops-bg.jpg");
    background-size: cover;
}
.digital.dd .img-bg-top {
    background-image: url("../img/digital/header-dd-bg.jpg");
    background-size: cover;
}
.digital.data .img-bg-top {
    background-image: url("../img/digital/header-data-bg.jpg");
    background-size: cover;
}
.digital.pm .img-bg-top {
    background-image: url("../img/digital/header-pm-bg.jpg");
    background-size: cover;
}
.digital.sap .img-bg-top {
    background-image: url("../img/digital/header-sap-bg.jpg");
    background-size: cover;
}
.training .img-bg-top {
    background-image: url("../img/training/training-bg.png?");
    background-size: cover;
}
.actuariat .img-bg-top {
    background-image: url("../img/actuariat/actuariat-bg.jpg");
    background-size: cover;
}
.executive .img-bg-top {
    background-image: url("../img/executive/executive-bg.jpg");
    background-size: cover;
}
.actuariat .img-bg-top,
.executive .img-bg-top,
.training .img-bg-top {
    min-height: 5rem;
}
@media only screen and (min-width: 540px)  {
    .actuariat .img-bg-top,
    .executive .img-bg-top {
        min-height: 23.75rem;
    }
    .training .img-bg-top {
        min-height: 17rem;
    }
}
.about .img-bg-top {
    background-image: url("../img/about/about-bg.jpg");
    background-size: cover;
}
/* specifique group */
@media only screen and (min-width: 540px)  {
    .header-group .img-bg-top {
        min-height: 43.75rem;
        top: 18.75rem;
    }
}
.header-group .img-bg-top .vtabs {
    padding-top: 3.125rem;
}
@media only screen and (min-width: 540px)  {
    .header-group .img-bg-top .vtabs {
        padding-top: 21rem;
    }
}
/* specifique service */
@media only screen and (min-width: 540px)  {
    .header-service .img-bg-top {
        min-height: 23.75rem;
        top: 18.75rem;
    }
}
.header-service .img-bg-top .vtabs {
    padding-top: 3.125rem;
}
/*
@media only screen and (min-width: 540px)  {
    .header-service .img-bg-top .vtabs {
        padding-top: 21rem;
    }
}*/
.accordion-button:not(.collapsed) {
    color: #000000;
    font-weight: 700;
}
.accordion-body {
    min-height: 275px;
}
.vtabsrounded.rounded-top {
    border-top-left-radius: 0.5rem!important;
    border-top-right-radius: 0.5rem!important;
}
.vtabsrounded {
    background: #ffffff;
}
.box
{
    font-size: 1.25rem; /* 20 */
    background-color: #c8dadf;
    position: relative;
    padding: 100px 20px;
}
.box.has-advanced-upload
{
    outline: 2px dashed #92b0b3;
    outline-offset: -10px;

    -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
    transition: outline-offset .15s ease-in-out, background-color .15s linear;
}
.box.is-dragover
{
    outline-offset: -20px;
    outline-color: #c8dadf;
    background-color: #fff;
}
.box__dragndrop,
.box__icon
{
    display: none;
}
.box.has-advanced-upload .box__dragndrop
{
    display: inline;
}
.box.has-advanced-upload .box__icon
{
    width: 100%;
    height: 80px;
    fill: #92b0b3;
    display: block;
    margin-bottom: 40px;
}

.box.is-uploading .box__input,
.box.is-success .box__input,
.box.is-error .box__input
{
    visibility: hidden;
}

.box__uploading,
.box__success,
.box__error
{
    display: none;
}
.box.is-uploading .box__uploading,
.box.is-success .box__success,
.box.is-error .box__error
{
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;

    -webkit-transform: translateY( -50% );
    transform: translateY( -50% );
}
.box__uploading
{
    font-style: italic;
}
.box__success
{
    -webkit-animation: appear-from-inside .25s ease-in-out;
    animation: appear-from-inside .25s ease-in-out;
}
@-webkit-keyframes appear-from-inside
{
    from	{ -webkit-transform: translateY( -50% ) scale( 0 ); }
    75%		{ -webkit-transform: translateY( -50% ) scale( 1.1 ); }
    to		{ -webkit-transform: translateY( -50% ) scale( 1 ); }
}
@keyframes appear-from-inside
{
    from	{ transform: translateY( -50% ) scale( 0 ); }
    75%		{ transform: translateY( -50% ) scale( 1.1 ); }
    to		{ transform: translateY( -50% ) scale( 1 ); }
}

.box__restart
{
    font-weight: 700;
}
.box__restart:focus,
.box__restart:hover
{
    color: #39bfd3;
}

.js .box__file
{
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.js .box__file + label
{
    max-width: 80%;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
}
.js .box__file + label:hover strong,
.box__file:focus + label strong,
.box__file.has-focus + label strong
{
    color: #39bfd3;
}
.js .box__file:focus + label,
.js .box__file.has-focus + label
{
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}
.js .box__file + label *
{
    /* pointer-events: none; */ /* in case of FastClick lib use */
}

.no-js .box__file + label
{
    display: none;
}

.no-js .box__button
{
    display: block;
}
.box__button
{
    font-weight: 700;
    color: #e5edf1;
    background-color: #39bfd3;
    display: block;
    padding: 8px 16px;
    margin: 40px auto 0;
}
.box__button:hover,
.box__button:focus
{
    background-color: #0f3c4b;
}
/* my add*/