@charset "UTF-8";
/* CSS Document */
#edit-profil {width: 100%; clear: both; float: left; background:#f6f6f6;}
#edit-profil .content { width:1200px; display: table; margin: auto;}

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

/* BANNER */
#edit-profil #slider {width: 100%; clear: both; float: left; height: 280px; background:#c9bfa5; font-family: 'Raleway', sans-serif; color: #fff;}
#edit-profil #slider .left_profil {width: 600px; margin-left: 250px; margin-top: 120px; clear: both; float: left; height: 150px; }
#edit-profil #slider .right_profil {width: 150px; margin-top: 120px; float: right; height: 150px; }

#edit-profil #slider .retour { text-align: left; margin-left: -20px; text-transform: uppercase; font-size: 12px; font-weight: 600; width: 100%; line-height: 14px;}
#edit-profil #slider .retour a { color: #fff; }
#edit-profil #slider .name_artiste { text-align: left; letter-spacing: 2px;  font-size: 36px; font-weight: 500; width: 100%; line-height: 36px;}
#edit-profil #slider .job_artiste { text-align: left; font-size: 18px; font-weight: 500; width: 100%; line-height: 22px;}
#edit-profil .button_save { float: left; line-height:30px; background: #df7d25; color: #fff; text-transform: uppercase; font-size: 12px; font-weight: 600; padding-left: 10px; padding-right: 10px; cursor: pointer; border: 1px solid #fff;}
#edit-profil .button_save img { float: left; margin-right: 10px; margin-top: 8px; }
#edit-profil .button_save:hover { background: #cf7321; color: #fff; }

#edit-profil #slider .views_count { text-transform: uppercase; font-size: 24px; text-align: right;}
#edit-profil #slider .views_count strong { font-size: 12px; }
#edit-profil #slider .partager { text-transform: uppercase; font-size: 12px; font-weight: 600; line-height: 22px; }
#edit-profil #slider .partager img { float: right; cursor: pointer; margin-left: 5px; }

#edit-profil .slider_profile { height: 150px !important; }
#edit-profil .slider_profile .left_profil { margin-left: 0px !important; margin-top: 90px !important; }
#edit-profil .slider_profile .name_artiste { font-size: 30px !important; }

@media (max-width: 768px) {
    #edit-profil #slider {height: 450px; }
    #edit-profil #slider .retour { margin-left: 0px; float: left; width: 50%; }
    #edit-profil #slider .views_count { font-size: 24px; float: right; width: 50%; margin-right: 0px; line-height: 17px; }
    #edit-profil #slider .profil_div {  width:210px; height: 170px; position: relative; display: table; margin: auto; }
    #edit-profil #slider .profile { width:210px; height: 210px; border: 3px solid #fff; border-radius:210px; position: absolute; left: 0px; top: -40px; }
    #edit-profil #slider .liked { position: absolute; left: 155px; top: -35px; cursor: pointer; }
    #edit-profil #slider .pencil { position: absolute; left: 155px; bottom: 5px; cursor: pointer; }

    #edit-profil #slider .name_artiste { text-align: center; }
    #edit-profil #slider .job_artiste { text-align: center; min-height: 44px; }
    #edit-profil #slider .button_write { float: none; display: table; margin: auto; }    
    #edit-profil #slider .button_save { float: none; display: table; margin: auto; }
    
    #edit-profil #slider .partager { float: right; }
    
    #edit-profil .slider_profile { height: 130px !important; display: none !important}
    #edit-profil .slider_profile .left_profil { margin-left: 20px !important; width: calc(100% - 20px) !important; margin-top: 20px !important; }
    #edit-profil .slider_profile .name_artiste { font-size: 20px !important; text-align: left !important; }
}




/* BODY */ 
#edit-profil #corps { width: 100%; background: #f6f6f6; clear:both; float: left; font-family: 'Raleway', sans-serif; font-size: 14px; color: #333; }
#edit-profil #corps .profil_div {  width:210px; height: 210px; position: absolute; top: -155px; }
#edit-profil #corps .profile { width:210px; height: 210px; border: 3px solid #fff; border-radius:210px; position: absolute; }
#edit-profil #corps .liked { position: absolute; left: 155px; top: 5px;  }
#edit-profil #corps .pencil { position: absolute; left: 155px; bottom: 5px; cursor: pointer; }
 
#edit-profil .star { float: left; width: 30px; margin-left: 10px; margin-right: 20px; margin-top: -2px;}
#edit-profil h2 { float: left; font-size: 24px; text-transform: uppercase; font-weight: 200; color: #bd7d16; letter-spacing: 1px; line-height: 30px; }

#edit-profil #corps .left {float: left; width: 760px; }
#edit-profil #corps .right {float: right; width: 300px; border-left: 1px solid #c9bfa5; padding-left: 30px; }

#edit-profil #corps .bloc { float: left; min-width: 90px; padding-left: 35px; font-size: 14px;  }
#edit-profil #corps .bloc .label { font-size: 12px; text-transform: uppercase; color: #bd7d16;  }
#edit-profil #corps .bloc .input { font-size: 14px; color: #333; line-height: 24px; border: 1px solid #fff; width: 85px; padding-left: 5px;  }
#edit-profil #corps .bloc .inputlist { font-size: 14px; color: #333; height: 26px; line-height: 24px; border: 1px solid #fff; background: #fff; width: 92px;  }
#edit-profil #corps .bloc .inputtext { font-size: 14px; color: #333; line-height: 20px; border: 1px solid #fff; width: calc(100% - 22px); padding: 10px; height: 90px;  }
#edit-profil #corps .bloc .inputvideo { width: 171px; padding-left: 5px; margin-right: 10px;  }
#edit-profil #corps .bloc .inputlangue1 { width: 120px;  }
#edit-profil #corps .bloc .inputlangue2 { width: 388px;  }
#edit-profil #corps .bloc_full { width: 100%; padding-right: 0px; padding-left: 0px;  }
#edit-profil #corps .bloc_first { padding-left: 0px;  }

@media (max-width: 768px) {
    
    #edit-profil .star { margin-left: 0px; margin-right: 10px; }
    #edit-profil h2 { float: left; font-size: 22px; text-transform: uppercase; font-weight: 200; color: #bd7d16; letter-spacing: 0px; line-height: 30px; }
    #edit-profil #corps .bloc { width: 33%; padding-right: 0px; padding-left: 0px; font-size: 14px; margin-bottom: 20px;  }
    #edit-profil #corps .bloc .input { font-size: 16px; width: calc(100% - 32px); padding-left: 10px; -webkit-appearance: none; -webkit-border-radius:0px; border-radius: 0px;  }
    #edit-profil #corps .bloc .inputlist { font-size: 16px; width: calc(100% - 12px); height: 34px; padding-left: 10px; -webkit-appearance: none; -webkit-border-radius:0px; border-radius: 0px;  }
    #edit-profil #corps .bloc .inputlangue1 { width:calc(100% - 32px); }
    #edit-profil #corps .bloc .inputlangue2 { width:calc(100% - 10px);  }
    #edit-profil #corps .bloc .labellangue { height: 28px; }
    #edit-profil #corps .bloc_couleur { padding-right: 0px; }
    #edit-profil #corps .bloc_full { width: 100% !important;  }
    #edit-profil #corps .bloc .inputvideo { margin-bottom: 10px;  }


    #edit-profil #corps .left {float: left; width: 100%; margin-bottom: 20px; }
    #edit-profil #corps .right {float: right; width: 100%; border-left: 0px solid #c9bfa5; padding-left: 0px; }




    
}

/* popup recadrer */
#edit-profil .photo_div_container { float:left; background:#fff; padding:0px; width:400px; height:400px; overflow:hidden }
#edit-profil .zoom_left { float:left; margin-left:0px; cursor:pointer; opacity:0.6 }   
#edit-profil .zoom_right { float:left; margin-left:20px; cursor:pointer; opacity:0.6 }  
#edit-profil .zoom_plus { float:left; margin-left:245px; cursor:pointer; opacity:0.6 }  
#edit-profil .zoom_minus { float:left; margin-left:20px; cursor:pointer; opacity:0.6 }
#edit-profil img:hover { opacity:1; } 

@media (max-width: 768px) {
    #edit-profil .photo_div_container { float:left; background:#fff; padding:0px; width:100%; height:100%; overflow:hidden }
    #edit-profil .zoom_plus { float:right; margin-left:10px; }  
    #edit-profil .zoom_minus { float:right; }



    
}
/* photos layout */
#edit-profil #corps .masonry {
  column-count: 2;
  column-gap: 10px;
}
/* Masonry bricks or child elements */
#edit-profil #corps .item { 
  display: inline-block;
  margin: 0 0 8px;
  width: 100%;
position: relative;
}
#edit-profil #corps .item .photo { width: 100%; }
#edit-profil #corps .item .delete { position: absolute; top: 5px; right: 5px; cursor: pointer; opacity: 0.8}
#edit-profil #corps .item .delete:hover { opacity: 1 }
#edit-profil #corps .item .add { cursor: pointer; opacity: 0.8}
#edit-profil #corps .item .add:hover { opacity: 1 }

#edit-profil .right .box_coord { background: url("/img/edit-coord.png"); width:270px; height: 670px; padding-left: 30px; padding-top: 30px; font-size: 14px; color: #333;}
#edit-profil .right .div_1 { float: left; width: 120px; }
#edit-profil .right .div_2 { float: left; width: 240px; }
#edit-profil .right .box_coord .label { font-size: 12px; color: #cf9821; text-transform: uppercase; line-height: 22px; }
#edit-profil .right .input { font-size: 14px; color: #333; line-height: 24px; border: 1px solid #fff; width: calc(100% - 5px); padding-left: 5px; background: #f6f6f6;  }
#edit-profil .right .input1 { width: calc(100% - 15px); }
#edit-profil .right .inputlist { font-size: 14px; color: #333; height: 26px; line-height: 24px; border: 1px solid #fff; background: #f6f6f6; width: calc(100% - 0px);  }
#edit-profil .right .inputdate { font-size: 14px; color: #333; height: 26px; line-height: 24px; border: 1px solid #fff; background: #f6f6f6; width: 74px; margin-right: 5px;  }


#edit-profil .box_coord .button_write { float: left; line-height:30px; background: #fff; color: #bd7d16; text-transform: uppercase; font-size: 12px; font-weight: 600; padding-left: 10px; padding-right: 10px; cursor: pointer; border: 1px solid #bd7d16}
#edit-profil .box_coord .button_write img { float: left; margin-right: 10px; margin-top: 8px; }
#edit-profil .box_coord .button_write:hover { background: #bd7d16; color: #fff; }

@media (max-width: 768px) {
    #edit-profil .right .box_coord { background:#fff; width:calc(100% - 40px); height: auto; padding-left: 20px; padding-right: 20px; padding-top: 20px; font-size: 14px; color: #333; }
    #edit-profil .right .div_1 { float: left; width: 50%; }
    #edit-profil .right .div_2 { float: left; width: 100%; }
    #edit-profil .right .input { font-size: 16px; width: calc(100% - 12px); padding-left: 10px; -webkit-appearance: none; -webkit-border-radius:0px; border-radius: 0px; background: #f6f6f6;  }
    #edit-profil .right .input1 { width: calc(100% - 32px); }
    #edit-profil .right .inputlist { font-size: 16px; width: calc(100% - 12px); height: 34px; padding-left: 10px; -webkit-appearance: none; -webkit-border-radius:0px; border-radius: 0px;  }

}


/* popups */
#popup_encours { width:500px; display:none; position: fixed; top: 200px; left: 50%; margin-left: -275px; z-index: 10001; background: #f6f6f6; font-family: 'Raleway', sans-serif; font-size: 14px; color: #333;border: 3px solid #fff; padding: 25px; text-align: center;}

@media (max-width: 768px) {
    #popup_encours { width:calc(100% - 60px); top: 50px; left: 15px; margin-left: 0px; padding: 15px; text-align: center; }
}

#popup_delete { width:600px; display:none; position: fixed; top: 200px; left: 50%; margin-left: -275px; z-index: 10001; background: #f6f6f6; font-family: 'Raleway', sans-serif; font-size: 14px; color: #333;border: 3px solid #fff; padding: 25px; text-align: center;}
#popup_delete .warning { line-height: 28px; float: right; margin-right: 20px; color: #333; text-transform: uppercase; margin-right: 10px; }
#popup_delete .button2 { float: left; line-height: 28px; border: 1px solid #e74c3c; padding-left: 20px; padding-right: 20px; color: #e74c3c; text-transform: uppercase; cursor: pointer; }
#popup_delete .button2:hover { background:#e74c3c; color: #fff; }
#popup_delete .button { float: right; line-height: 28px; border: 1px solid #333; padding-left: 20px; padding-right: 20px; color: #333; text-transform: uppercase; cursor: pointer; }
#popup_delete .button:hover { background:#333; color: #fff; }

@media (max-width: 768px) {
    #popup_delete { width:calc(100% - 60px); top: 50px; left: 15px; margin-left: 0px; padding: 15px; text-align: center; }
    #popup_delete .button2 { width: 100%; padding: 0px; text-align: center; margin-bottom: 20px; }
    #popup_delete .button { width: 100%; padding: 0px; text-align: center; }


}

#popup_success { width:600px; display:none; position: fixed; top: 200px; left: 50%; margin-left: -275px; z-index: 10001; background: #f6f6f6; font-family: 'Raleway', sans-serif; font-size: 14px; color: #333;border: 3px solid #fff; padding: 25px; text-align: center;}
#popup_success .warning { line-height: 28px; float: left; color: #333; text-transform: uppercase; margin-right: 10px; }
#popup_success .button2 { float: right; line-height: 28px; border: 1px solid #27ae60; padding-left: 20px; padding-right: 20px; color: #27ae60; text-transform: uppercase; cursor: pointer; }
#popup_success .button2:hover { background:#27ae60; color: #fff; }

@media (max-width: 768px) {
    #popup_success { width:calc(100% - 60px); top: 50px; left: 15px; margin-left: 0px; padding: 15px; text-align: center;}
    #popup_success .button2 { width: 100%; padding: 0px; text-align: center; margin-top: 20px; }

}

#popup_message { width:750px; display:none; position: fixed; top: 200px; left: 50%; margin-left: -400px; z-index: 10001; background: #f6f6f6; font-family: 'Raleway', sans-serif; font-size: 14px; color: #333;border: 3px solid #fff; padding: 25px; }
#popup_message .star { float: left; width: 30px; margin-left: 10px; margin-right: 20px; margin-top: -2px;}
#popup_message h2 { float: left; font-size: 24px; text-transform: uppercase; font-weight: 200; color: #bd7d16; letter-spacing: 1px; line-height: 30px; }
#popup_message .profile { width:75px; height: 75px; border: 3px solid #fff; border-radius:75px; float: left; margin-right: 20px; }
#popup_message .button { float: right; line-height: 28px; border: 1px solid #af9d6c; padding-left: 20px; padding-right: 20px; color: #bd7d16; text-transform: uppercase; cursor: pointer; }
#popup_message .button:hover { background:#af9d6c; color: #fff; }
#popup_message .inputtext { float: left; color: #333; font-size: 14px; line-height: 18px; padding: 10px; height: 100px; border: 1px solid #ddd; background: #fff; width:627px; }

#popup_message .success { line-height: 28px; float: right; margin-right: 20px; color: #27ae60; text-transform: uppercase; }
#popup_message .button2 { float: right; line-height: 28px; border: 1px solid #333; padding-left: 20px; padding-right: 20px; color: #333; text-transform: uppercase; cursor: pointer; }
#popup_message .button2:hover { background:#333; color: #fff; }