@charset "UTF-8";
/* CSS Document */


#commentcamarche .content { width:1110px; display: table; margin: auto;} 

@media (max-width: 768px) {
    #commentcamarche .content { width:calc(100% - 20px); display: table; margin: auto; }  
}

/* BANNER */
#commentcamarche #slider {width: 100%; clear: both; float: left; height: 250px; background-image:url("/img/banner-comment.png"); background-position:50% 50%; background-size:cover; position: relative;}
#commentcamarche #slider h1 {float:none; font-family: 'Raleway', sans-serif; text-align: center; text-transform: uppercase; letter-spacing: 4px;  font-size: 60px; font-weight: 200; color: #fff; line-height: 50px; margin-top: 150px;}

@media (max-width: 768px) {
    #commentcamarche #slider { height: 150px; } 
    #commentcamarche #slider h1 { margin-top: 40px; line-height: 40px; font-size: 40px; }
}


/* BODY */
#commentcamarche #corps { width: 100%; background: #f6f6f6; clear:both; float: left; position: relative; font-family: 'Raleway', sans-serif; font-size: 14px; color: #333; }
#commentcamarche .you_are {display: table; margin: auto; font-weight: 600; color: #bd7d16; font-size: 24px; text-transform: uppercase; text-align: center}
#commentcamarche .button_on { float: left; line-height: 33px; padding-left: 20px; padding-right: 20px; color: #fff; background: #cf9821; text-transform: uppercase; font-size: 18px; border: 1px solid #bd7d16; margin-left: 10px; margin-right: 10px; }
#commentcamarche .button_off { float: left; line-height: 33px; padding-left: 20px; padding-right: 20px; color: #bd7d16; background: #f6f6f6; text-transform: uppercase; font-size: 18px; border: 1px solid #bd7d16; margin-left: 10px; margin-right: 10px; cursor: pointer; } 

@media (max-width: 768px) {
    
}

#commentcamarche .etapes { background: url("/img/etapes.png"); width: 953px; height: 1592px; display: table; margin: auto; position: relative; }
#commentcamarche .number { font-size: 80px; color: #bd7d16; font-weight: 300; line-height: 80px;  }
#commentcamarche .etape { font-size: 24px; color: #333; font-weight: 300; line-height: 34px; position: absolute; text-align: left; }
#commentcamarche .etape span { font-size: 34px;  }
#commentcamarche .etape strong { font-size: 34px; color:#cf9821; font-weight: 700;  }

#commentcamarche .etape_1 { top: 30px; left: 120px; }
#commentcamarche .etape_2 { top: 340px; left: 520px; width: 500px; }
#commentcamarche .etape_3 { top: 685px; left: 120px; width: 700px; }
#commentcamarche .etape_4 { top: 1025px; left: 480px; width: 500px; }
#commentcamarche .etape_5 { top: 1375px; left: 480px; width: 600px; }

#commentcamarche #div_recruteurs { background: url("/img/etapres-recruteur.png"); width: 1029px; height: 1567px; }

#commentcamarche .etapes_mobile { float: left; width: 100%; display: none; } 
#commentcamarche .etapes_mobile .number { display: table; margin: auto; height: 75px; } 
#commentcamarche .etapes_mobile .centered { width: 100%; } 
#commentcamarche .etapes_mobile .number_black { display: table; margin: auto; height: 40px; width: 40px; line-height: 37px; background: #000; text-align: center; color: #fff; border-radius: 50%; font-size: 24px; } 

@media (max-width: 768px) {
    #commentcamarche .etapes { display: none; } 
    #commentcamarche .etapes_mobile { display: block; } 
    #commentcamarche .etape { font-size: 18px; color: #333; font-weight: 400; line-height: 24px; position: relative; text-align: center; width: 100%; }
    #commentcamarche .etape span { font-size: 24px;  }
    #commentcamarche .etape strong { font-size: 24px; color:#cf9821; font-weight: 600;  }

}

#commentcamarche .cadeau { float: left; width: calc(100% - 40px); background: #fff; -webkit-box-shadow: 0px 0px 5px 5px #ddd; box-shadow: 0px 0px 5px 5px #ddd; padding: 20px; }
#commentcamarche .cadeau img { float: left; margin-right: 20px; }
#commentcamarche .cadeau .text { float: left; width: calc(100% - 130px); font-size: 24px; color: #333; font-weight: 300; line-height: 34px;  }
#commentcamarche .cadeau .text strong { font-size: 34px; color:#cf9821; font-weight: 700;  }
#commentcamarche .cadeau .text em { font-size: 14px; float: right; }

@media (max-width: 768px) {
    #commentcamarche .cadeau { display: none; }
}

#commentcamarche .tableau { float: left; width: calc(100% - 40px); background: #f6f6f6; border: 1px solid #bd7d16;  -webkit-box-shadow: 0px 0px 5px 5px #ddd; box-shadow: 0px 0px 5px 5px #ddd; padding: 20px; position: relative}
#commentcamarche .tableau .line {width: 1070px; height: 1px; background: #c9bfa5; position: absolute; }

#commentcamarche .tableau h2 { text-align: center; text-transform: uppercase; color: #bd7d16; font-size: 24px; font-weight: 700; line-height: 24px; }
#commentcamarche .tableau .labels { float: left; width: 200px; margin-left: 20px; text-align: left; color: #333; font-size: 18px; line-height: 22px; }
#commentcamarche .tableau .labels img { float: left; margin-right: 20px; margin-top: 10px; }
#commentcamarche .tableau .labels .label { float: left; }
#commentcamarche .tableau .labels strong { color:#cf9821; }

#commentcamarche .tableau .column { float: left; width: 155px; background: #fff; text-transform: uppercase;  margin-left: 15px; text-align: center; color: #bd7d16; font-size: 18px; line-height: 24px; }
#commentcamarche .tableau .bloc { float: left; width: 100%; height: 44px; }
#commentcamarche .tableau .bloc2 { float: left; width: 100%; height: 66px; }
#commentcamarche .tableau .button { float: left; width: 100%; height: 40px; color: #fff; background: #c9bfa5; letter-spacing: 1px; font-weight: 500; text-align: center; line-height: 40px; opacity: 0.85;}
#commentcamarche .tableau .button2 { float: left; width: 100%; height: 40px; color: #fff; background: #cf9821; letter-spacing: 1px; font-weight: 500; text-align: center; line-height: 40px; opacity: 0.85;}
#commentcamarche .tableau .button:hover { opacity: 1; }
#commentcamarche .tableau .button2:hover { opacity: 1; }
#commentcamarche .tableau .button3 { float: left; width: 100%; height: 40px; color: #27ae60; background: #fff; letter-spacing: 1px; font-weight: 500; text-align: center; line-height: 40px; opacity: 1; font-weight: bold; }

#commentcamarche .tableau_responsive { float: left; width: calc(100% + 20px); margin-left: -10px; background: #fff; display: none}
#commentcamarche .tableau_responsive h2 { text-align: center; text-transform: uppercase; color: #bd7d16; font-size: 20px; font-weight: 700; line-height: 20px; }
#commentcamarche .tableau_responsive .cell_head { float: left; width: calc(100% - 20px); padding: 10px; background: #fff; border-top: 3px solid #ddd; text-align: left; text-transform: uppercase; color: #bd7d16; font-size: 20px;}
#commentcamarche .tableau_responsive .cell_head  img { float: left; margin-right: 10px; }

#commentcamarche #list_choices { float: left; width: 100%; }
#commentcamarche #list_choices .cell_list { float: left; width: calc(100% - 60px); padding: 10px; padding-left: 50px; background: #e8e8e8; border-bottom: 1px solid #ddd; text-align: left; text-transform: uppercase; color: #333; font-size: 18px; }

#commentcamarche .tableau_responsive .cell_last { width: calc(20% - 20px); border-right: 0px solid #c9bfa5;}
#commentcamarche .tableau_responsive .selected { border-top: 3px solid #cf9821 ; }
#commentcamarche .tableau_responsive .list_div { display: none; }
#commentcamarche .tableau_responsive .cell_1 { float: left; width: calc(70% - 21px); line-height: 35px; padding: 10px; background: #f6f6f6; border-top: 1px solid #ddd; border-right: 1px solid #ddd; }
#commentcamarche .tableau_responsive .cell_1  img { float: left; margin-right: 10px; }
#commentcamarche .tableau_responsive .cell_2 { float: left; width: calc(30% - 20px); padding: 10px; line-height: 35px; height: 35px;  border-top: 1px solid #ddd; background: #f6f6f6; text-align: center}
#commentcamarche .tableau_responsive .cell_3  { background: #fff; }
#commentcamarche .tableau_responsive .cell_4  { background: #fff; }
#commentcamarche .tableau_responsive strong   { color: #cf9821; }
#commentcamarche .tableau_responsive .button { float: left; width: 100%; height: 40px; color: #fff; background: #c9bfa5; letter-spacing: 1px; font-weight: 500; text-align: center; line-height: 40px; text-transform: uppercase;}
#commentcamarche .tableau_responsive .button2 { float: left; width: 100%; height: 40px; color: #fff; background: #cf9821; letter-spacing: 1px; font-weight: 500; text-align: center; line-height: 40px; text-transform: uppercase; }
#commentcamarche .tableau_responsive .button3 { float: left; width: 100%; height: 40px; color: #27ae60; background: #fff; letter-spacing: 1px; font-weight: 500; text-align: center; line-height: 40px; opacity: 1; font-weight: bold; text-transform: uppercase; border-top:1px solid #ddd; border-bottom:1px solid #ddd; }

@media (max-width: 768px) {
    #commentcamarche .tableau { display: none;}
    #commentcamarche .tableau .labels { float: left; width: 150px; margin-left: 0px; text-align: left; color: #333; font-size: 14px; line-height: 18px; }
    #commentcamarche .tableau .labels img { display: none}
    #commentcamarche .tableau_responsive { display: block;}

}





#commentcamarche #communaute { width:1110px; display: table; margin: auto; font-family: 'Raleway', sans-serif; font-size: 14px;  }
#commentcamarche #communaute .star { float: left; margin-right: 40px;}
#commentcamarche #communaute h2 { float: left; padding-top: 20px; text-transform: uppercase; font-weight: 200; color: #333; font-size: 40px; letter-spacing: 2px; line-height: 44px; }
#commentcamarche #communaute h2 span { color: #bd7d16; font-size: 50px; }
#commentcamarche #communaute .sort { float: right; margin-top: 90px; }
#commentcamarche #communaute .sort a { display: inline-table; padding-left: 10px; padding-right: 10px; text-transform: uppercase; color: #333; font-size: 14px; line-height: 20px; }
#commentcamarche #communaute .sort a:hover { text-decoration: underline; }
#commentcamarche #communaute .sort a.active { color: #bd7d16; }
#commentcamarche #communaute #link_last { border-left: 1px solid #333; }

#communaute .artiste { float: left; width: 348px; height: 348px; margin: 10px; position: relative; background-position:50% 50%; background-size:cover;}
#communaute .artiste .alaune { position: absolute; top: 0px; left: 0px; }
#communaute .artiste .infos { position: absolute; bottom: 0px; height: 70px; background: rgba(0,0,0,0.80); color: #fff; width: 100%;}
#communaute .artiste .likes { float: left; margin-left: 15px; margin-top: 15px; line-height: 14px; font-size: 16px; width: 30px; height: 40px; padding-right: 20px; border-right: 1px solid #fff; text-align: center; font-weight: bold;}
#communaute .artiste .likes img { margin-bottom: 3px; cursor: pointer;}
#communaute .artiste .name_job { float: left; width: 200px; margin-left: 20px; margin-top: 15px; line-height: 20px; font-size: 14px; }
#communaute .artiste .name { font-size: 14px; font-weight: bold;}
#communaute .artiste .message { float: right; margin-right: 20px; margin-top: 20px; cursor: pointer; }

#commentcamarche #communaute .voir_plus { display: inline-table; line-height: 46px; border: 2px solid #bd7d16; padding-left: 20px; padding-right: 20px; color: #bd7d16; text-transform: uppercase; font-size: 18px;}
#commentcamarche #communaute .voir_plus:hover { color: #fff; background:#bd7d16  }
#commentcamarche #communaute .pagination { float: right; line-height: 16px; }
#commentcamarche #communaute .pagination a { float: left; margin: 6px; font-size: 18px; }
#commentcamarche #communaute .pagination a.active { color: #bd7d16; }

@media (max-width: 768px) {
    #commentcamarche #communaute { width:calc(100% - 40px); display: table; margin: auto; font-family: 'Raleway', sans-serif; font-size: 14px;  }
    #commentcamarche #communaute .star { float: left; margin-right: 20px; }
    #commentcamarche #communaute .star img { width: 63px; }
    #commentcamarche #communaute h2 { float: left; padding-top: 15px; text-transform: uppercase; font-weight: 200; color: #333; font-size: 20px; letter-spacing: 2px; line-height: 24px; }
    #commentcamarche #communaute h2 span { color: #bd7d16; font-size: 24px; }
    
    #communaute .artiste { float: left; width: 100%; height: 320px; margin: 0px; margin-bottom: 20px; position: relative}
    #commentcamarche #communaute .sort { float: right; margin-top: 20px; width: 100%; }
    #commentcamarche #communaute #link_top { float: left; padding: 0px; }
    #commentcamarche #communaute #link_last { float: right; padding: 0px; border-left: 0px solid #333; }
    #communaute .artiste .name_job { margin-left: 10px; width: 180px;  }
    #communaute .artiste .message { margin-right: 10px; }

    #commentcamarche #communaute .voir_plus { padding: 0px; width: calc(100% - 4px); text-align: center; }

}

@media (max-width: 320px) {
    #communaute .artiste .likes { margin-left: 10px; padding-right: 10px;}
    #communaute .artiste .message { margin-right: 10px; }  
    #communaute .artiste .name_job { margin-left: 10px; width: 180px;  }
}