/* Couleurs : 

Voir commun.css

 */

/* SLIDER AUTRES PAGES --------------------------------------------------------------------- */

/* MODE DEKSTOP / TABLETTE */

.slider_autre{
    background: #3D566E;
}

.slider_autre div button:hover{
    cursor: pointer;
}

.slider_autre div:hover{
    opacity: 0.80;
}

.slider_autre_actif:hover{
    opacity: 1 !important;
    transition: 0 !important;
}

.slider_autre div p{
    margin: 0;
    color: #fff;
    font-size: 1.125em;
    margin-top: 0.875em;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.031875em;
    font-family: Arial;
}

.slider_autre div h2{
    color: #fff;
    margin-bottom: 0.875em;
    font-family: Arial;
    font-size: 1.5em;
}

.all-phases{
    padding: 0;
}

.phases-autre{
    width: 100%;
    height: 100%;
    text-align: left;
    padding-left: 1.5625em;
    padding-top: 0;
    padding-bottom: 0;
    background: none;
    border: 0;
}

.phases-autre:active, .phases-autre:focus{
    outline-style: none;
}

.slider_autre_actif{
    background: #fff;
}

.slider_autre_actif .phases-autre{
    border-top: 0.3125em solid #EA7152 !important;
    border-bottom: 0.3125em solid #EA7152 !important;
    border-left: 0.3125em solid #EA7152 !important;
    border-right: 0.3125em solid #EA7152 !important;
}

.slider_autre_actif p, .slider_autre_actif h2{
    color: #3D566E !important;
}

#button_autre_phase2, #button_autre_phase3{
    border-left: 0 !important;
    border-right: 0 !important
}

#button_autre_phase1{
    border-right: 0 !important
}

#button_autre_phase4{
    border-left: 0 !important
}

/* MODE MOBILE */

.slider_autre_mobile{
    background: #3D566E;
}

.slider_autre_mobile div:nth-of-type(2){
    border-left: 0.0625em solid #fff;
    border-right: 0.0625em solid #fff;
}

.slider_autre_mobile div:nth-of-type(3){
    border-right: 0.0625em solid #fff;
}

#slider_autre_actif_mobile{
    background: #fff;
    border-top: 0.4375em solid #EA7152;
    border-bottom: 0.4375em solid #EA7152;
}

#slider_autre_actif_mobile p{
    margin-bottom: 0;
    margin-top: 0.3125em;
    font-size: 0.8em;
    color: #3D566E;
}

#slider_autre_actif_mobile h2{
    font-size: 0.9em;
    color: #3D566E;
    margin-bottom: 0.3125em;
}

#button_autre_phase2, #button_autre_phase3{
    border-left: 0 !important;
    border-right: 0 !important
}

#button_autre_phase1{
    border-right: 0 !important
}

#button_autre_phase4{
    border-left: 0 !important
}

.slider_autre_after:after{
    content: '';
    background-image: url(../images/timeline/after_triangle.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 1.75em;
    width: 1.75em;
    margin: auto;
    position: absolute;
    bottom: -1.0625em;
    left: 0;
    right: 0;
    z-index: 9;
}

/** RESPONSIVE SLIDER AUTRES PAGES -------------------------------------------------------------------------**/

@media (max-width: 1318px) {
    
    .slider_autre_actif button {
        border-top: 0.25em solid #E36A4C !important;
        border-bottom: 0.25em solid #E36A4C !important;
        border-left: 0.25em solid #E36A4C !important;
        border-right: 0.25em solid #E36A4C !important;
    }
    
    .slider_autre div h2 {
        font-size: 1.1875em;
    }
    
    .slider_autre div p {
        font-size: 0.9375em;
    }
    
    .slider_autre div button {
        padding-left: 1.25em;
    }
    
    .slider_autre{
        margin-top: 5.875em;
    }
    
}

@media (max-width: 1100px) {
    
    .slider_autre_actif button {
        border-top: 0.1875em solid #E36A4C !important;
        border-bottom: 0.1875em solid #E36A4C !important;
        border-left: 0.1875em solid #E36A4C !important;
        border-right: 0.1875em solid #E36A4C !important;
    }
    
    .slider_autre{
        margin-top: 4.875em;
    }
    
    .slider_autre div h2 {
        font-size: 1.09375em;
        margin-bottom: 0.5em;
    }
    
    .slider_autre div p {
        font-size: 0.84375em;
        margin-top: 0.5em;
        font-weight: 500;
    }
    
}

@media (max-width: 991px) {
    
    .slider_autre div h2 {
        font-size: 0.9375em;
        margin-bottom: 0.4375em;
    }
    
    .slider_autre div p {
        font-size: 0.75em;
        margin-top: 0.4375em;
        letter-spacing: 0;
    }

   .arrow-1, .arrow-3, .arrow-1-1, .arrow-3-1 {
        right: -1.125em;
    }

}

@media (max-width: 830px) {
    
    .slider_autre div p {
        font-size: 0.6875em;
    }
    
}

@media (min-width: 768px) {
    
    .slider_autre{
        display: flex;
    }
    
    .slider_autre_mobile{
        display: none;
    }

}

@media (max-width: 767px) {
    
    .slider_autre_mobile, .slider_autre_mobile{
        margin-top: 4.5625em;
    }
    
    .slider_autre{
        display: none;
    }
    
    .slider_autre_mobile{
        display: flex;
        margin-left: 0.3125em;
        margin-right: 0.3125em;
    }

}