@charset "UTF-8";
/*CSS HP Guide social*/

@import url('fonts.css');

body {
    background: #fff;
	 background-image:none;

    font-size: 12px;
}


#recherche-home { display:block;float: right; height: 30px;}
#recherche-home input {  }
#recherche-home input.btn-green { border:1px solid #0d8a2d; margin-right: 0px;}


.content-actu { display:flex; float:left; background-color:#edecec; margin-top: 10px; min-height:160px; font-size:13px;}

.content-actu.encadre { background-color:#e8f4ec; }
.content-actu .visu-actu {
    display:block;
    float:left;
}
.content-actu .txt {
    display:block;
    float:left;
}

.visu-actu img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.content-actu .title5 { }
.content-actu a, .content-actu a:hover { color: #0255a3;}
.content-actu h5, .content-actu .title5 { color: #666; font-size: 12px;font-weight: normal;}
.content-actu h4, .content-actu .title4, .content-actu a.title4:hover {color: #333; font-size: 18px; text-decoration: none; line-height:19px;}

.voir-tout {    display: block; height: 30px; margin: 10px auto;}
.voir-tout a { float: right; margin:0 20px; width:150px; text-align:center; color:#ffffff; background-color:#0255a3; padding:2px 0px}
.voir-tout a:hover {  color:#dee9f3;}

#guide-centre { background-color:#dee9f3; padding:10px; margin-top:30px;  }

.titre2, #guide-centre .title3, #forum-home .title3, #minisite .title3 {font-family: 'OswaldBook'; font-size:2em; text-transform:uppercase; color:#0255a3; }

div#twitter {
    margin-bottom: 30px;
}
#twitter .title3 {font-family: 'OswaldBook'; font-size:2em; text-transform:uppercase; color:#0255a3; margin-top:25px;}
div#newsletter {
    background-color: #0255a3;
    padding:15px 5px 15px 15px;
}

#newsletter .title3 {
    font-family: 'OswaldBook';
    font-size: 2em;
    text-transform: uppercase;
    color: #fff;
}


div#sondage {
    padding:15px 5px 15px 15px;
    background-color:#e6f3eb;
}
#sondage label {
    font-size: 12px;
}
#sondage input[type="radio"]{
    display: block;
    float: left;
    line-height: normal;
    margin: 4px 0 0;
}

#twitter { float:left;}

#guide-aidants { background-color:#e8f4ec; padding:10px; margin-top:30px;  }
#guide-aidants .title3, #newsletter-home .title3 {
    text-transform:uppercase; color:#1d9149;
    font-family: "OswaldBook";
    font-size:2em;
}

#guide-aidants .btn {
    /*background:#1d9149;*/
    border-radius: 0; display: block; margin: 20px 30px 5px 30px; text-align: center; font-family: 'OswaldLight'; font-size:20px;}
#guide-centre .btn {
    border-radius: 0; display: block; margin: 20px 30px 5px 30px; text-align: center; font-family: 'OswaldLight'; font-size:20px;}
#guide-aidants .btn a, #guide-centre .btn a { color:#ffffff;}
#guide-aidants .btn img, #guide-centre .btn img { margin-right:15px;}

/*#echos .title3, #themes-home .title3 {font-family: 'DIN Pro Condensed Regular'; font-size:2.5em; text-transform:uppercase; color:#a09c9c;margin-top:25px;} */
#echos .title3, #themes-home .title3 {font-family: 'OswaldBook'; font-size:2em; text-transform:uppercase; color:#a09c9c;margin-top:20px;}

#minisite .title3 { margin-left:20px}

#guide-aidants .txt, #guide-centre .txt  {font-family: 'OswaldLight'; font-size:20px; text-align:center; color:#555555; }


#forum-home li { background-color:#d5e3ef; border-radius:10px; padding:10px 20px; margin:10px 0;}
#forum-home li a { color:#0255a3}

.box-news {
    background: url("https://pro.guidesocial.be/images/enveloppe-newsletter.png") no-repeat scroll right bottom; padding:40px 20px; min-height: 210px; background-color:#0255a3; }
.text-newsletter { font-family:'OswaldLight'; font-size:20px; color:#FFFFFF; margin-bottom:30px}

.largeur-home {width:100%}
#box-news #newsletter { clear:both;}

.input-append .add-on, .input-append .btn, .input-append .btn-group {
    margin-left: -1px;
}

#fond-forum { background:url("https://pro.guidesocial.be/images/fond-bulles-forum.gif") repeat center;
    padding:20px 10px;
    margin: 30px 0 30px 0;
}


.input-append .input_newsletter, .input-append #newsletter {width: 100%; margin-bottom:20px;}
.input-append input, .input-append select, .input-append .uneditable-input {
    /*border-radius: 5px; */
}


#icones2 .txt-icone {min-width:33%;}
/*
.visu-icone-benevolat {width:146px; height:128px; background:url("https://pro.guidesocial.be/images/icone-benevolat.png"); float:left; }
.visu-icone-stage {width:146px; height:128px; background:url("https://pro.guidesocial.be/images/icone-stage.png"); float:left; }
.visu-icone-job-etu {width:146px; height:128px; background:url("https://pro.guidesocial.be/images/icone-job-etu.png"); float:left; }
.visu-icone-jobs{width:146px; height:128px; background:url("https://pro.guidesocial.be/images/icone-jobs.png"); margin: 0 auto; }
.visu-icone-annonces{width:146px; height:128px; background:url("https://pro.guidesocial.be/images/icone-annonces.png"); margin: 0 auto; }
.visu-icone-formations{width:146px; height:128px; background:url("https://pro.guidesocial.be/images/icone-formations.png"); margin: 0 auto; }
.visu-icone-agenda{width:146px; height:128px; background:url("https://pro.guidesocial.be/images/icone-agenda.png"); margin: 0 auto; } */
.txt-icone { float:left; width:150px; font-family:'OswaldLight'; }
.txt-icone .today { font-size:20px; font-weight:400; clear:both; display:block; line-height:25px; color:#0255a3; }
.txt-icone .titre { font-size:25px; text-transform:uppercase; font-weight:400; color:#95c3ef; line-height:30px; display:block;}
.txt-icone .chiffre { font-size:56px; text-transform:uppercase; font-weight:800; color:#0255a3; line-height:55px; display:block; min-height: 75px;}
.txt-icone .txt { font-size:15px}

.box-icone-col { min-height: 145px;
    margin-top: 25px; }

.box-icone-col .txt-icone { text-align:center; width: 300px; }

.box-icone-col .txt-icone .txt, #icones2 .txt-icone .txt  {
    background: #0255a3 none repeat scroll 0 0;
    color: #fff;
    font-size: 25px;
    font-weight: 500;
    padding: 5px 20px;
}

.box-icone .txt-icone { margin-top:10px; }



.wrapper {
    width: 95%;
    margin: 3em auto;
}

.masonry {
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    font-size: 0.3em;
}

.item {
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	position:relative;
    min-height: 90px;
}


#hp .tout-sondage {
    margin-top:-32px;
/*    margin-top:0px;*/
}

.imu3{ margin:0 auto; text-align: center; width: 100%;}

.btn-article {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 250px;
    min-height: 48px;
    padding: 0 20px;
    background: #01469C;
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: -0.2px;
    line-height: 18px;
    text-align: center;
}

.btn-article-jmm {
    background: #8ACADD;
    color: #256E88;
}

.icon-hash {
    width: 28px;
    height: 28px;
    position: relative;
    background: #fff;
    border-radius: 50%;
    margin-left: 18px;
}

.icon-hash::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: url(../images/jmm-tag-blue.svg) no-repeat center center;
    background-size: contain;
}

@media only screen and (min-width: 400px) {
    .masonry {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 1280px) {
    .wrapper {
        width: 1260px;
    }
}


#themes-home { margin:30px 0 10px 0;}
.txt-themes { background-color:#1d9149; bottom: 10%; color: #ffffff; font-size: 15px; margin: 0 28%; opacity: 0.8; position: absolute; text-align: center; padding: 8px 10px;}



#col-gauche.span4, #col-droite.span4 {
    width: 300px;
    float:left;
}


.leaderboard {
    display: none;
}
.span8.centres .content, .span8.aidants .content {
    padding-top:10px;
}


@media (min-width: 320px) {
    #hp .span16 {
        margin-left:0px;
    }


    #hp > .container {
        max-width: 100%;
        margin-left:auto;
        margin-right:auto;
    }


    .visu-actu {
        /*width:300px;*/
        text-align:center;
        padding-right: 0px;
    }
    .content-actu .txt {
        /*min-width: 300px;*/
    }


    #forum-home.span8 {
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 0px;
    }

    .span3.fiche-minisite {
        float:none;
        width: 192px;
        margin:10px auto;
    }

    #box-icone-tablet.span6 .span3 {
        float: none;
        margin:0 auto;
        width: 300px;
    }
}

@media (min-width: 470px) {
    /*.span3.fiche-minisite {
        float:left;
        width: 136px;
        margin-left:20px;
    } */

    .content-actu {
        width: 100%;
        min-height: 140px;
    }


    /*.btn.btn-big-din { min-height:40px;}*/
}


@media (min-width:767px) {
    #hp > .container {
        width:724px;
    }
    #hp .span16 {
        width: 694px;
        margin-left:20px;
        padding-left:10px;
    }


    .visu-actu {
        max-width:300px;
        padding-right: 5px;

    }
   
    .content-actu .txt {
       /*width:53%;*/
        width:320px;
		margin-left:10px;
    }

    #box-icone-tablet.span6 {
        width:352px;
    }
    #box-icone-tablet.span6 .span3 {
        float: left;
        width: 160px;
        margin-left:20px;
    }

    .box-icone-col, .box-icone-col .txt-icone {
        width: 166px;
        margin-left:0px;
    }
    .visu-icone-jobs {
        margin-top: 0px;
    }

    .span8.centres, .span8.aidants {
        margin-left:20px;
        width: 694px;
    }
    .span8.centres .content, .span8.aidants .content {
        width:400px;
        float:left;
    }
    .span8.centres .comments, .span8.aidants .comments {
        display:block;
        float:left;
        width:244px;
        margin-left:10px;
    }
    .span8.centres .comments {
    margin-top:40px;
    }
    .span8.aidants .comments {
        margin-top:30px;
    }
    #guide-centre {
        min-height: 330px;
    }
    #guide-aidants {
        min-height: 300px;
        margin-top: 20px;
    }


    #icones2 { margin:20px; width:100% }

    #minisite {
        width:100%;
    }
    .span3.fiche-minisite {
        float:left;
        width: 136px;
        margin-left:20px;
    }



    #newsletter-home.span7 {
        width:100%;
        margin-left: 10px;

    }
    .box-news {
        width:300px;
        min-height: 210px;
        padding: 40px 20px;
    }
    .imu3 {
        display:block;
        float:left;
        width:300px;
        margin-left:15px;
        margin-top:47px;
    }

    .echos-sondage{
        display:block;
        float:left;
        width:100%;
    }

    #sondage.span5 {
        float:right;
    }
    #col-bas .span5 {
        width: 300px;
    }


    .btn.btn-big-din { min-height:0;}

    #col-gauche.span4, #col-droite.span4 {
        margin-left:20px;
    }


}

@media (min-width: 980px) {
    #hp > .container {
        width:959px;
    }
    #hp .span16 {
        width: 639px;
        margin-left:20px;
        padding-left:0px;
    }
    .content-actu .txt {
        /*width: 50%; */
        width:320px;
		margin-left:10px;
    }
    #col-gauche.span4, #col-droite.span4 {
        margin-left:10px;
    }

    .box-icone-col, .box-icone-col .txt-icone {
        width: 300px;
        margin-left:0px;
    }

    .visu-icone-jobs {
        margin-top: 30px;
    }

    .span8.centres, .span8.aidants {
        width: 639px;
        text-align: center;
    }
    #guide-aidants {
        min-height: 330px;
    }
    #guide-centre {
        min-height: 460px;
    }
    .span8.centres .content, .span8.aidants .content {
        display:inline;
        width:auto;
    }
    .span8.centres .content {
        margin:10px 0 10px 80px;
    }
    .span8.centres .comments, .span8.aidants .comments {
        display:inline;
        width:auto;
        margin-left:0px;
        margin-top:0px;
    }


    #fond-forum {
        width:100%;
    }
    #forum-home.span8 {
        width: 460px;
    }
    #newsletter-home {
        width: 460px;
    }


    #minisite {
        width:100%;
        margin-left: 0px;
        height:330px;
        overflow: hidden;
    }
    .span3.fiche-minisite {
        width: 176px;
    }

    #sondage.span5 {
        float:left;
    }

    .imu3 {
        margin-left:40px;
        margin-top:0px;
    }

    #col-bas.span16 {
        width:300px;
    }
    #echos.span5 {
        margin-left:30px;
    }
    #sondage.span5, #newsletter.span5 {
        margin-left:20px;
    }
    #twitter.span5 {
        margin-left:30px;
    }




    #col-gauche.span4 {
        margin-top: 40px;
    }


    #desktop-span-etudiants .txt-icone {
        width: 190px;
        margin-left: 20px;
    }

}

@media (min-width: 980px) and (-ms-high-contrast:none)
{
    .content-actu .txt { /* IE10 */
        width: 320px;
    }
    *::-ms-backdrop .content-actu .txt { /* IE11 */
        width: 320px;
    }
}
@media (min-width: 1200px) {


    #hp > .container {
        width:1180px;
        padding:0;
    }
    #hp .span16 {
        width:860px;
    }
    .content-actu .txt {
        /*width: 553px;*/
        width: 627px;
    }
    #col-gauche.span4, #col-droite.span4 {
        margin-left:20px;
    }
    #col-bas.span16 {
        width: 300px;
    }


    .span8.centres {
        width: 440px;
    }
    .span8.aidants {
        width: 400px;
    }
    #guide-centre, #guide-aidants {
        min-height:475px;
        margin-top: 30px;
    }
    .span8.centres, .span8.aidants {
        margin-left:20px;
    }
    .span8.centres .content {
        min-height: 294px;
        margin:10px 0;
    }
    .span8.aidants .content {
        min-height: 294px;
    }
    #guide-centre .txt  {min-height:30px;}

    #fond-forum {
        width:auto;
        margin-left: 0px;
    }
    #newsletter-home.span7 {
        width: 350px;

    }
    .box-news {
        min-height: 210px;
        padding: 40px 20px;
    }

    .leaderboard {
        display: block;
    }

	
	
	.visu-actu { margin-right: 15px; max-width: 23%; text-align: left;}



    #desktop-span-etudiants .txt-icone {
        width: 230px;
        margin-left: 60px;
    }


}

@media (min-width: 1600px) {

    #hp > .container {
        width:1500px;
    }


    .visu-icone-agenda, .visu-icone-jobs {
        margin-top:40px;
    }

    #hp .span16 {
        position: relative;
        left:319px;
    }

    #col-gauche.span4 {
        position: relative;
        left: -880px;
        float: left;
    }
    #col-droite.span4 {
        margin-top: 40px;
        position: relative;
        left: 0px;
        float: left;
    }
    #hp #col-bas.span16:before {
        clear: both;
    }

    #hp #col-bas.span16 {
        width: 860px;
    }
    #col-bas .span5 {
        width: 260px;
    }
    .echos-sondage{
        width:auto;
    }
	#footer .container-footer .container {
        width:940px;
    }


}
/*
@media (max-width: 700px) {
    #themes-home .item {height:200px;}
    #themes-home .item img { height:auto; width:100%; float:left; }
} */

@media only screen and (max-width:767px){
    #themes-home .item { position:relative;}
    #themes-home .item { height:250px; overflow:hidden; }
    #themes-home .item img { height:auto; width:100%; float:left; margin-bottom:100px; }
	.content-actu .visu-actu {float: none;}
	.content-actu .txt {margin: 0 10px;}
/*    .txt-themes { position: absolute; width:290px; text-align:center; margin-left:15%; } */
	 
	
	
}
@media only screen and (max-width:450px){



	#recherche-home { width:100%; margin-bottom:10px;}
	/*
	.visu-actu img { width:100%; clear:both; margin: 0 0 5px 0; }
	.visu-actu { margin:0 0 0 -2px; }
    */
	.content-actu { margin-bottom:5px;}
	.btn-blue {margin-bottom: 5px;}

	#themes-home .item { position:relative;}
	#themes-home .item {height:170px; overflow:hidden; }
	#themes-home .item img { height:auto; width:100%; float:left; }
	.txt-themes { margin:0 10%; position: absolute; width:70%; margin-bottom:20px; text-align:center;}
    .span3.fiche-minisite {width: 100%; max-width: 100%; padding:5px 0; }
   #minisite .title3 { margin-left: 0px;}
   .fiche-minisite .title4 { height:auto;}
   .fiche-minisite .img-fiche {display: block; height: 65px; margin: 0px auto; width: 65px; }
   .fiche-minisite .img-fiche img { height: 60px; clip:rect(0,-100px,0,-100px)}
   .box-news { min-height:100px; padding:10px 15px;}
   #fond-forum { padding:10px 0 0 0; margin : 10px 0;}
   #icones2 .txt-icone, .box-icone-col .txt-icone {min-width: 100%; text-align:center;}
   .txt-icone {width: 80%;}
   #footer .container-footer {font-size: 1.2em; text-align: center;}


   /**/
   	

}

#resolution {
    position:fixed;
    top:0px;
    left:200px;
    background:#EEE;
}

@media (max-width: 1200px){
    #newsletter-home .banner-homepage-3{
        float: left
    }
}
@media (max-width: 767px){
    #newsletter-home .banner-homepage-3 {
        float: none;
        text-align: center;
    }
}