/*******************************************************************************************/
/*** GÉNÉRAL                                                                             ***/
/*******************************************************************************************/

::selection {
    background: #e62d31;
    color: #fff;
    text-shadow: none;
}

@media (min-width: 1200px) {
    .container, .navbar .container {
        width: 100%;
        padding: 0 calc(100% /12);
    }
}

@media (min-width: 992px) {
    .container, .navbar .container {
        max-width: 1200px;
        width: 100%;
        padding: 0 30px;
    }
    
    .center-logo-full-width.accordion-menu > .navbar-left {
        width: 45%;
    }
}


*, *:before, *:after {
    transition: ease-in-out .2s all;
}

.clear-both {
    clear: both!important;
}

@media (min-width: 1200px) {
    @media screen and (-webkit-min-device-pixel-ratio: 0) {
        .row-equal-height .col-lg-5 {
            width: 42%;
        }
    }
}

.rounded {
    border-radius: 50%;
}

/*******************************************************************************************/
/*** HEADER                                                                              ***/
/*******************************************************************************************/


.navbar .navbar-nav > li > a, .search-cart-header .subtitle,
.dropdown-header, .dropdown-menu, .simple-dropdown > ul.dropdown-menu > li a {
    font-size: 14px;
    font-weight: 400;
}

.sticky-nav.shrink-nav {
    height: 60px !important;
}

.sticky-nav.shrink-nav .logo-light { height: auto; }

.header-center-logo .nav > li {
    margin: 5px 15px;
}

.dropdown-menu, .simple-dropdown > ul.dropdown-menu > li a, .navbar-nav > li > a {
    text-transform: none;
}

@media (min-width: 992px) {
    .col-md-10 {
        width: 100%;
    }
}

@media (max-width: 991px) {
    .navbar-default .navbar-toggle {
        background-color: #e62d31;
    }
    
    .navbar-default .navbar-nav > li > a {
        color: white;
    }
}

/* ONGLET */

.navbar-default .navbar-nav > li > a {
    color: #4a4a49;
}

@media (min-width: 992px) {
    
    .navbar-nav > li > a,
    .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a.active,
    .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover{
        border: none;
    }
    
    .navbar-nav > li > a:after {
        content: '';
        display: block;
        width: 4px;
        height: 4px;
        border-radius: 2px;
        background: #e62d31;
        background: rgba(230,45,49,.2);
        position: relative;
        left: 50%;
        margin-left: -2px;
        top: 1vh;
    }
}

/* ONGLET HOVER */
.navbar-nav > li > a:hover:after, .navbar-nav > li > a:hover:after {
    background: white;
    background: rgba(230,45,49,1);
    width: 50%;
    margin-left: -25%;
}

.navbar-default .navbar-nav > li > a:hover {
    color: #e62d31;
}

/* ONGLET ACTIF */
.nav-black.static-sticky .navbar-nav li.current-menu-ancestor a,
.nav-black.static-sticky .navbar-nav li.current-menu-item a {
    color: #e62d31;
}
.nav-black.static-sticky .navbar-nav li.current-menu-ancestor > a:after,
.nav-black.static-sticky .navbar-nav li.current-menu-item > a:after {
    background: #e62d31;
    background: rgba(229,45,49,1);
}

.nav-white.static-sticky .navbar-nav li.current-menu-ancestor a,
.nav-white.static-sticky .navbar-nav li.current-menu-item a {
    color: #e62d31;
}
.nav-white.static-sticky .navbar-nav li.current-menu-ancestor > a:after,
.nav-white.static-sticky .navbar-nav li.current-menu-item > a:after {
    background: #e62d31;
    background: rgba(229,45,49,1);
}

/* SOUS-MENU */

.simple-dropdown > ul.dropdown-menu {
    width: auto;
}

.static-sticky.sticky-nav .navbar-nav > li.simple-dropdown > .dropdown-menu {
    top: 37px;
}

.static-sticky .dropdown-menu, .static-sticky .cart-content,
.static-sticky .dropdown-menu a, .static-sticky .cart-content a,
/* SOUS-MENU de l'onglet actif */
.nav-black.static-sticky .navbar-nav li.current-menu-ancestor .dropdown-menu a,
.nav-black.static-sticky .navbar-nav li.current-menu-item .dropdown-menu a {
    color: white;
}

.static-sticky .dropdown-menu a:hover, .static-sticky .cart-content a:hover,
.static-sticky .dropdown-menu a:focus, .static-sticky .cart-content a:focus,
/* SOUS-MENU de l'onglet actif */
.nav-black.static-sticky .navbar-nav li.current-menu-ancestor .dropdown-menu a:hover,
.nav-black.static-sticky .navbar-nav li.current-menu-item .dropdown-menu a:hover
.nav-black.static-sticky .navbar-nav li.current-menu-ancestor .dropdown-menu a:focus,
.nav-black.static-sticky .navbar-nav li.current-menu-item .dropdown-menu a:focus {
    background: #e62d31;
    background: rgba(229,45,49,1);
}


/*******************************************************************************************/
/*** FOOTER                                                                              ***/
/*******************************************************************************************/

.footer-logo img {
    opacity: .3;
}


/*******************************************************************************************/
/*** BREADCRUMB                                                                          ***/
/*******************************************************************************************/

.breadcrumb {
    padding: 2vh 15px 3vh 15px;
}

.breadcrumb li {
    color: #4a4a49;
}

.breadcrumb a {
    color: #e62d31;
}

.breadcrumb ul > li+li:before {
    content: "•";
    font-size: inherit;
    top: 2px;
    color: #4a4a49;
    padding: 0 2rem;
}

.page-title.bg-gray {
    margin-bottom: 1vh;
    padding: 0;
    background: none;
}



/*******************************************************************************************/
/*** TEXTES                                                                              ***/
/*******************************************************************************************/

/*** TITRES                                                                             ***/
    
    h1, h1.section-title, h2, h2.section-title, h3, h3.section-title, .section-title, .title-large, .owl-subtitle.black-text {
        font-family: 'Blogger Sans', 'Ubuntu', sans-serif;
        letter-spacing: 2px;
        text-transform: none;
        /*color: #4a4a49;*/
        line-height: 1.04em!important;
        font-weight: normal;
    }
    
    
    h1, h1.section-title, .section-title, .home h2, .home h2.section-title {
        /*font-size: 2.998rem;*/
        padding: 1rem 0!important;
        /*color: #e62d31;*/
    }
    
    /*h2, h2.section-title { font-size: 1.999rem; }
    h3, h3.section-title { font-size: 1.414rem; }*/
    
    h4.number {
        color: #e62d31;
        font-size: 5rem;
        padding: 0!important;
    }

@media (min-width: 992px) {
    
    
    h1, h1.section-title, .section-title, .home h2, .home h2.section-title {
        font-size: 3.998rem;
    }
    
    
    h2, h2.section-title { font-size: 1.999rem; }
    h3, h3.section-title { font-size: 1.414rem; }
    
    h4.number {
        color: #e62d31;
        font-size: 5rem;
        padding: 0!important;
    }
    
    /*** AUTRES BALISES                                                                     ***/
    
    small {
        font-size: 0.707rem;
    }
    
    .title-large {
        font-size: 15px!important;
    }
    
    big {
        font-size: 1.2rem;
    }
}

blockquote, q {
    border-left: 5px solid #e62d31;
    font-family: 'Blogger Sans', 'Ubuntu', sans-serif;
    font-style: italic;
    color: #6E6E6D;
    font-size: 1.414rem;
    margin-top: 20px;
}

/*** Orange light text devient ROUGE                                                    ***/

.orange-light-text {
    color: #4a4a49;
}

/*** Separator line devient un CERCLE                                                   ***/

.separator-line {
    width: 8px;
    margin: 1vh auto;
    border-radius: 4px;
    height: 8px;
}

.testimonial-style2 p {
    margin: 0;
}

.text-white, .text-white h1, .text-white h2, .text-white h3, .text-white p, blockquote.text-white {
    color: white;
    border-color: white;
}

.text-red {
    color: #e62d31;
}

.text-grey {
    color: #d0d0d0;
}

ul.dotted, ul.rounded {
    margin: auto 38px 22px!important;
    list-style-type: disc!important;
}

blockquote p.text-white {
    text-transform: none;
    font-style: normal;
    color: white;
    font-size: 0.9rem;
    font-weight: initial;
}

blockquote p.text-white:before {
    content: none; }


/*******************************************************************************************/
/*** BOUTONS                                                                             ***/
/*******************************************************************************************/

.btn {
    border-radius: 5rem!important;
    text-transform: none;
    font-weight: bold;
    letter-spacing: 2px;
    margin: 0 auto 0 0;
}

.btn.btn-large {
    font-size: 1.414rem;
}



.highlight-button-dark {
    background-color: #e62d31;
    color: white;
    border-color: #e62d31;
}

.highlight-button-dark:hover {
    background-color: transparent;
    color: #e62d31;
    border-color: #e62d31;
}

.highlight-button {
    background-color: transparent;
    color: #e62d31;
    border-color: #e62d31;
}

.highlight-button:hover {
    background-color: #e62d31;
    color: white;
    border-color: white;
}

.btn-small-white-background {
    background-color: transparent;
    color: white;
    border-color: white;
}

.btn-small-white-background:hover {
    background-color: white;
    color: #e62d31;
    border-color: white;
}


/*******************************************************************************************/
/***  FORMULAIRE                                                                         ***/
/*******************************************************************************************/


input[type="button"], input[type="text"], input[type="email"], input[type="search"], input[type="password"], textarea, input[type="submit"],
form .rounded {
    border-radius: 24px;
}


/*******************************************************************************************/
/***  SLIDER                                                                             ***/
/*******************************************************************************************/

.slider-typography {
    height: calc(75vh - 80px);
    margin-top: 80px;
}


/*******************************************************************************************/
/***  CLASS : KEYWORD                                                                    ***/
/***  mot-clé + spéparation                                                              ***/
/*******************************************************************************************/

.keyword {
    text-align: center;
    font-size: 1.999rem;
    font-family: 'Blogger Sans', 'Ubuntu', sans-serif;
    color: #e62d31;
}

.keyword:after {
    content: url('/themes/porc-armor/assets/images/timeline.svg');
    width: 25px;
    height: 125px;
    display: inline-block;
}


/*******************************************************************************************/
/*** COUNTERS                                                                            ***/
/*******************************************************************************************/

.counter-section {
    text-align: center;
}

.counter-section span.counter-number {
    font-size: 3.998rem;
    font-family: 'Blogger Sans', 'Ubuntu', sans-serif;
    padding: 1vh 0;
}



/*******************************************************************************************/
/*** BLOC PAGE SUIVANTE                                                                  ***/
/*******************************************************************************************/

.page-suivante div[class*='column'] {
    position: relative;
    z-index: 2;
    text-align: center;
}


/*******************************************************************************************/
/*** BLOC POPUP                                                                          ***/
/*******************************************************************************************/

@media (min-width: 1200px) {
    .bloc-popup {
        margin: 30px auto 120px auto;
    }
}

.bloc-popup h1, .bloc-popup h1.section-title, .bloc-popup h2, .bloc-popup h2.section-title,
.bloc-popup h3, .bloc-popup h3.section-title, .bloc-popup .section-title, .bloc-popup p {
    color: white;
}


/*******************************************************************************************/
/*** BLOC ZIGZAG                                                                         ***/
/*******************************************************************************************/
.bloc-zigzag-text-right {
    padding: 50px 50px 70px 0;
}

.bloc-zigzag-text {
    padding: 70px 50px 70px;
}

/*******************************************************************************************/
/*** IMG CONTAINER                                                                       ***/
/*******************************************************************************************/

@media (min-width: 1200px) {
    .img-container {
        height: calc(100vh - 300px);
        overflow: hidden;
        text-align: center;
    }
    .img-container > div {
        width: auto;
        padding: 0;
    }
    
    .img-container img {
        width: auto;
        max-width: initial;
    }
}






/*******************************************************************************************/
/***  TABS                                                                                ***/
/*******************************************************************************************/

.nav-tabs > li > a {
    margin-top: 0;
}

/*** CSS TRICK POUR DÉBUGUER VIDEO DANS LES TABS                                        ***/
.fluid-width-video-wrapper {
    padding-top: 50% !important;
}

/*******************************************************************************************/
/*** TABS5                                                                               ***/
/*******************************************************************************************/

@media (min-width: 992px) {
    .tab-style5 .tabs-left .nav-tabs {
        width: 110px;
    }
}

@media (max-width: 991px) {
    .poles-activite .nav-tabs {
        width: 100%;
        display: flex;
    }
    
    .poles-activite .nav-tabs li {
        margin-top: 32px;
    }
    
    .poles-activite .nav-tabs li.active {
        margin-top: 0;
    }
}

.tab-style5 .nav-tabs li,
.tab-style5 .tabs-left .nav-tabs li{
    border: none;
}

.tab-style5 .tabs-left .nav-tabs li a {
    font-size: 3rem;
    line-height: normal;
    padding: 0!important;
    font-family: 'Blogger Sans';
    color: #FBE0E0;
    color: rgba(230,45,49,.15);
}

.tab-style5 .tabs-left .nav-tabs li.active a {
    background-color: white;
    color: #e62d31;
    color: rgba(230,45,49,1);
    font-size: 5rem;
}

.tab-style5 .tab-content {
    border: none;
    background: transparent;
}



/*******************************************************************************************/
/*** IMAGES                                                                              ***/
/*******************************************************************************************/

@media (min-width: 1200px) {
    .img-apropos {
        max-height: 450px;
        width: auto;
    }
}



/*******************************************************************************************/
/*** BLOG                                                                                ***/
/*******************************************************************************************/

 .blog-post a.highlight-button {
    color: #4a4a49;
    border-color: #4a4a49;
    margin-top: 8%;
}

 .blog-post a.highlight-button:hover, .blog-post a.highlight-button:active, .blog-post a.highlight-button:focus {
    border-color: inherit;
    background-color: #4a4a49;
    color: white;
}



/*******************************************************************************************/