@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,500i,700');
@import url('https://fonts.googleapis.com/css?family=Raleway:400,700,800,900');

/******************************************************************
HEADER INFO ARTICLES
*****************************************************************/

/**  derniers style appliquées pour le reportage **/
.article_reportage{
    padding:20px;
}

.text-link {
    color: #2a282b;
    font-weight: 700;
}

.text-link:hover {
     border-bottom: 1px dotted; 
     color: #6746c3;
}

h2.soustitre {
    margin-left:10px;
    text-align: left;
    font-size: 1.9em;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    color: #102027;
}
.image-reportage{
    padding-top: 10px;
    padding-right: 15px;
}
.credit-photo{
    margin-top: 2px;
    font-family: 'Raleway', sans-serif;
    font-size: 0.87em;

}
.espace-bottom{
    margin-bottom:10px;
}
/** END derniers style appliquées pour le reportage **/
.header-info {
    margin-left: 15px;
}
.header-info i, .header-info span, .header-info a {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 1.2em;
    /*margin-right: 5px;
    margin-left: 1px;
    */
}

.header-info i, .header-info span {
    color: #2a282b;
}
.positionRegion {
    margin-left: -10px !important;
    font-size: 18px !important;
}

.reportageTextBody a {
    font-size:  1.0em!important;
}

 .header-info a {
    font-family: 'Roboto', sans-serif;
}

.header-info a:hover {   
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 1.2em;
    color: #6746c3;
}
.reportageTextBody a {
    color: #2a282b;
    font-weight: 700;    
}
.reportageTextBody a:hover {
    color: #6746c3;    
    font-weight: 700;
    font-size: 12px;
    line-height: 20px;
}
/******************************************************************
END HEADER INFO ARTICLES
*****************************************************************/
h1.header-title {
    margin-top: 5%;
    margin-right: 5px;
    margin-bottom:5px!important;
    margin-left: 26px!important;
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
    font-size: 3.5em;
    line-height: 1.2em;
    color: #2a282b;
}

article table {
    width: unset;
    border-collapse: unset;
}

article table caption {
    margin-top: -12px;
}

.reportageTextBody div div {
    margin-left: 10px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1.2em !important;
    line-height: 1.6em;
    Color: #2a282b;
}
.reportageSousTitre {
    margin-top: 12px;
    margin-bottom: 14px;
    margin-left: 12px;
    color: #2a282b;
    font-family: 'Roboto', sans-serif;
    line-height: 1.4em;
}

.reportageTextBody > p {
    margin-left: 10px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    /*font-size: 1.2em !important;
    line-height: 1.6em;*/
    Color: #2a282b;
}
.para_reportage { 
    margin-left: 10px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1.1em;
    line-height: 1.7em; 
    Color: #2a282b;  
}

.para_reportage a {
    color: #2a282b;
    font-weight: 700; 
    font-size: 1.0em;
    text-decoration-line: underline;
    line-height: 1.7em;   
}

.para_reportage a:hover {
    color: #6746c3;    
    font-weight: 700;
    font-size: 1.0em;
    line-height: 1.7em; 
}



/******************************************************************
TAGS FOOTER ARTICLES
*****************************************************************/
.article-footer {
    margin-bottom: 20px;
    /*letter-spacing: 1px;*/
    padding: 6px 10px;
    font-size: 12px !important;
}

.article-footer a {
    margin: 1px;
    border: 1px solid #e9e9e9;
    padding: 6px;
    font-size: 12px !important;
    display: inline-block;
    color: #19191e;
    letter-spacing: 0.5px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

.article-footer a:hover {
    background-color: #f7f7f7;
    color: #6746c3;
    text-decoration: none !important;
    font-family: 'Roboto', sans-serif;
}
/******************************************************************
Button CALL TO ACTION URL
*****************************************************************/

a.buttonCTA_URL {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #fff;
    display: inline-block;
    text-decoration: bold;
    /*padding: -1em;*/
    /*background: #6746c3;*/
    /*background-color: #EA8E00;*/
    background-color: #0072ca;
    overflow: hidden;
    padding-left: 1em;
}

a.buttonCTA_URL:after {
    display: inline-block;
    /*background: #311b92;*/
    background-color: #0087ca;
    font-family: "Ionicons";
    content: "\f125";
    /*content:"»";*/
    position: relative;
    font-size: 18px;
    margin-left: 1em;
    padding: .6em 1em;
}

a.buttonCTA_URL:hover {
    /*background-color: #311b92;*/
    background-color: #0087ca;
    color: #fff;
}
/******************************************************************
TAGS ANOTHER ARTICLES
*****************************************************************/

article h3, article h4,
article p {
    padding: 6px;
    padding-left: 3px;
    margin: 0;
    font-size: 14px;
    text-align: left;
    line-height: 1.4;
    font-family: 'Roboto', sans-serif;
}

article h3 a {
    font-size: 16px;
    font-weight: 700;
    color: #19191e;
    text-decoration: none;
}

article h3 a:hover {
    font-size: 16px;
    font-weight: 700;
    color: #0087ca;
}

a.region {
    color: #f9046e !important;
}

a.region:hover {
    color: #6746c3 !important;
}

article h4, article h4 i {
    padding: 5px;
    /*padding-left:3px;
  margin:0;*/
    margin-bottom: 6px;
    font-size: 12px;
    text-align: left;
    line-height: 1.3;
    font-family: 'Roboto', sans-serif;
}

article h4 a, article h4 i {
    font-size: 14px;
    font-weight: 500;
    color: #19191e;
    text-decoration: none;
}

article h4 i, article h4 i:hover {
    font-size: 14px;
}

article h4 a:hover, article h4 a i:hover {
    font-weight: 500;
    color: #6746c3;
}

article p {
    /*margin-top:-5px;*/
    margin-bottom: 20px;
}


/******************************************************************
CARD
*****************************************************************/
.position-card {
    margin-top: 10px;
    margin-right: 10px;
}


/******************************************************************
 Share Social media
*****************************************************************/

.social-media {
    margin-bottom: 20px;
    color: rgb(126, 126, 126);
    display:none;!important
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: normal;
    height: auto;
    line-height: 23.799999237060547px;
    margin-bottom: 20px;
    width: 100%;
    float: left;
    border: solid 0px #aaa;
    text-align: center;
}

.social-media div {
    display:none;!important
    display: inline-block;
    width: 100px;
    margin: 0px;
    vertical-align: middle;
}

.social-media a {
    text-decoration: none;
    display: block;
    padding-left: 20px;
    color: #FFFFFF !important;
    font-weight: bold;
    transition: background-color .3s;
}

.social-media .fb a {
    padding: 7px 10px 7px 26px !important;
    background: #3B5999 url('/images/rs/fb14.png') no-repeat 10px center;
}

.social-media .twitter a {
    padding: 7px 10px 7px 32px;
    background: #01BBF6 url('/images/rs/twitter14.png') no-repeat 8px center;
}

.social-media .gplus a {
    padding: 7px 10px 7px 32px;
    background: #D54135 url('/images/rs/gplus14.png') no-repeat 10px center;
}

.social-media .fb a:hover {
    background-color: rgb(50, 75, 129);
}

.social-media .twitter a:hover {
    background-color: rgb(1, 159, 211);
}

.social-media .gplus a:hover {
    background-color: rgb(191, 52, 40);
}


.social-media-2 {
    margin-bottom: 20px;
    color: rgb(126, 126, 126);
    display:none;!important
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: normal;
    height: auto;
    line-height: 23.799999237060547px;
    margin-bottom: 20px;
    width: 100%;
    float: left;
    border: solid 0px #aaa;
    text-align: center;
}

.social-media-2 div {
    float: left;
    display:none;!important
    display: inline-block;
    margin: 5px;
    margin-left: 20px;
}

.comment-fb {
    margin-left: 45px !important;
    margin-right: 45px !important;
    padding-bottom: 40px;
}


/******************************************************************
 Css liste des reportages
*****************************************************************/
#imgReportage {
    width: 100%;
    height: 100%;
    border-bottom: 2px solid #ffffff;
}

.slideRepo {
    width: 100%;
    height: 100%;
    position: relative;
    border-bottom: 15px solid #ffffff;
}

.firstItem:nth-child(2n+1) {
    border-right: 15px solid #ffffff;
}

.slideRepo:hover {
    background-color: rgba(152,227, 250, 0.4) !important;
    transition: 0.3s;
}

.slideRepoContenu {
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    position: absolute;
    overflow: hidden;
    bottom: 0px;
    background-color: rgba(0,0, 0, 0.5);
}

.slideRepoContenu h3 a {
    color: #fff !important;
    font-weight: 500;
    text-align: center !important;
    overflow: hidden;
}

.slideRepoContenu h3 a:hover {
    color: #fff !important;
    font-weight: 500;
    overflow: hidden;
}

.slideRepo {
    overflow: hidden;
}

.firstItem:hover .slideRepo img {
    opacity: 0.95;
    overflow: hidden;
    transform: scale(1.05);
    transition: transform 0.3s, opacity 0.3s;
}

.slideRepo:hover img {
    opacity: 0.95;
    overflow: hidden;
    transform: scale(1.05);
    transition: transform 0.3s, opacity 0.3s;
}

.h2_title_rubrique {
    margin: 30px 0px 20px 0;
    font-size: 24px;
    font-family: 'Raleway', sans-serif;
    color: #2a282b;
    letter-spacing: 0;
    font-weight: 700;
}

.text_reportage {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 1.3em;
    line-height: 1.8em;
    background-color: #ffffff;
}

.img_reportage {
    width: 640px;
    height: 452px;
}
.img_reportage_2{
    width: 800px;
    height: 300px;
}

@media (max-width: 650px) {

    .firstItem:nth-child(2n+1) {
        border-right: 0px;
    }

    .img_reportage{
        width: 420px;
        height: 200px;
    }
    .img_reportage_2 {
        width: 420px;
        height: 200px;
    }
    h1.header-title{
        font-size: 2.4em;
    }
    .para_reportage {
        font-size: 1.1em;
    }
    .espace-bottom{
        margin-bottom:8px;
    }
}

/******************************************************************
 End Css liste des reportage
*****************************************************************/

/******************************************************************
 Css liste des campagnes
*****************************************************************/
.ion-ios-location-campagne{   
    font-size:30px; color:#464646;   
}
.h3_campagne i{
    display:block;    
}
.h3_campagne i:hover{
    color:#6746c3;
}
.slideCampagne {
    width: 100%;
    position: relative;
    /*border: -2px solid #6746c3;*/
}
.h3_campagne{
   text-align:center;
}


/******************************************************************
 End Css liste des campagnes
*****************************************************************/

/******************************************************************
 End Share Social media
*****************************************************************/

@media (min-width: 650px) and (max-width:899px) {
    h1.header-title {
        margin-top: 5%;
        margin-left: 10px;
        margin-right: 5px;
        margin-bottom: 5%;
        font-size: 2.6em;
    }

    .position-card {
        margin-right: 10px;
    }

    a.buttonCTA_URL {
        font-size: 12px;
        padding: -1em;
        padding-left: .9em;
    }

    a.buttonCTA_URL:after {
        /*content: "\f4d2";*/
        content: "\f125";
        /*content:"»";*/
        position: relative;
        font-size: 14px;
        margin-left: .9em;
        padding: .6em .9em;
    }

    article h1 {
        margin-left: 15px;
        font-size: 3.0em;
        color: green;
    }

    article table {
        width: unset;
    }

    .subtitlereportage {
        margin-left: -30px;
    }
}

@media only screen and (min-width: 450px) and (max-width: 649px) {
    h1.header-title {
        margin-top: 5%;
        margin-left: 10px;
        margin-right: 5px;
        margin-bottom: 5%;
        font-size: 1.9em;
    }
      h2.subtitle {
        margin-left: 5px!important;
    }

    .position-card {
        margin-left: 10px;
        margin-right: 10px;
    }

    .positionRegion {
        margin-left: -10px !important;
    }

    .positionRegion i {
        font-size: 12px;
    }

    a.region, a.region:hover {
        font-size: 12px;
    }


    article h3 a {
        font-size: 14px;
    }

    article h3 a:hover {
        font-size: 14px;
    }

    article h4 a, .header-info {
        font-size: 12px;
    }

    article h4 a:hover, .header-info:hover {
        font-size: 12px;
    }

    a.buttonCTA_URL {
        font-size: 12px;
        padding: -1em;
        padding-left: .9em;
    }

    a.buttonCTA_URL:after {
        /*content: "\f4d2";*/
        content: "\f125";
        /*content:"»";*/
        position: relative;
        font-size: 14px;
        margin-left: .9em;
        padding: .6em .9em;
    }

    article table {
        width: 100%;
    }

    .subtitlereportage {
        padding-left: 20px;
    }

    .social-media div {
        width: 150px;
    }


    .reportagePhotoG tbody tr td img, .reportagePhotoD tbody tr td img {
        display: block;
        vertical-align: middle !important;
    }

    .reportagePhotoG caption, .reportagePhotoD caption {
        margin-left: 20px;
    }
}

}

@media (max-width: 449px) {
    h1.header-title {
        margin-top: 5%;
        margin-left: 10px;
        margin-right: 5px;
        margin-bottom: 5%;
        font-size: 1.9em;
    }
      h2.subtitle {
        margin-left: 25px!important;
    }

    .position-card {
        margin-top: -5px;
        margin-left: 15px;
        margin-right: 15px;
    }

    article table {
        width: 100%;
    }

    article table tr td img {
        margin-left: auto;
        margin-right: auto;
        width: 100% !important;
        height: auto !important;
    }

    .subtitlereportage {
        padding-left: 20px;
    }

    a.buttonCTA_URL {
        font-size: 12px;
        padding: -1em;
        padding-left: .9em;
    }

    a.buttonCTA_URL:after {
        /*content: "\f4d2";*/
        content: "\f125";
        /*content:"»";*/
        position: relative;
        font-size: 14px;
        margin-left: .9em;
        padding: .6em .9em;
    }

    .social-media div {
        width: 100px;
    }

    .reportagePhotoG tbody tr td img, .reportagePhotoD tbody tr td img {
        display: block;
        vertical-align: middle !important;
    }

    .reportagePhotoG caption, .reportagePhotoD caption {
        margin-left: 20px;
    }
}

/******************************************************************
 Pagination
*****************************************************************/

#pagination, #pagination span  {
    padding-bottom:30px;
    display: inline-block;
     font-family: 'Roboto', sans-serif;
}

#pagination a, #pagination span span {
    color: black;
    float: left;
    padding: 8px 14px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
    font-size: 16px;
}

#pagination span span  {
    background-color: #6746c3;
    color: white;
    border: 1px solid #52389c;
}

#pagination a:hover:not(.active) {background-color: #e7e7e7;}

@media (max-width: 322px) {
    #pagination a, #pagination span span {
    
    padding: 5px 10px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
    font-size: 14px;
}
}

/******************************************************************
 End Pagination
*****************************************************************/