@font-face{
    font-family : "Heebo";
    font-weight: 300;
    src : url('fonts/Heebo-Light.ttf');
}

@font-face{
    font-family : "Heebo";
    font-weight: 700;
    src : url('fonts/Heebo-Bold.ttf');
}

@font-face{
    font-family : "Heebo";
    font-weight: 900;
    src : url('fonts/Heebo-Black.ttf');
}

* { font-family: 'Heebo', sans-serif !important; }

html, body { margin: 0; padding: 0; width: 100% }

#player { position: fixed; z-index: 5; top: 15px; left: 15px; }
#player #player_element { padding: 10px 15px; font-weight: 900; margin: 10px 0 5px 0; border-radius: 6px; background-color: #bf0a08; color:white; font-size: 14px }
#player #player_element:hover { cursor: pointer; background-color: #ad0a07 }
#player #player_element #player_butt { display: inline-block; margin: 0 0 -2px 3px; width: 14px; height: 14px; background-repeat: no-repeat; background-size: 100%; background-position: center }
#player #player_element.play #player_butt { background-image: url(play.svg); filter: invert(100%); }
#player #player_element.pause #player_butt { background-image: url(pause.svg); filter: invert(100%); }

#player .player_link { display: block; font-weight: 900; margin: 10px 0 5px 0; background: #CD0B09; padding: 10px 15px; font-size: 16px; border-radius: 6px; text-align: center; text-decoration: none; color: white; }
#player .player_link.top-corner { border-top-left-radius: 6px; border-top-right-radius: 6px }
#player .player_link.bottom-corner { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px }
#player .player_link:hover{ opacity: 0.9 }
#player #player_link_reactions { display: block; font-weight: 900; padding: 10px 15px; border-radius: 6px; background-color: #2f43a3; text-align: center; font-size: 14px; text-decoration: none; color: white; }
#player #player_link_reactions:hover { opacity: 0.9 }

header { width: calc(100% - 500px); max-width: 1300px; margin: 30px auto 0 auto; text-align: center }
header h1 { font-size: 66px; font-weight: 900; margin: 0; color: #CD0B09}
header h1 span { display: inline-block; width: 10px; }
header h2 { font-size: 40px; font-weight: 900; margin: -14px 0 0 0; padding: 0; padding-left: 280px; color: #CD0B09; font-style: italic }
header p { max-width: 800px; margin: 10px auto 15px auto; }
header #banniere { width: 100%; height: 400px; box-shadow: 3px 3px 20px 0px rgba(0,0,0,0.15); border-radius: 8px; background: url(banniere.jpg) no-repeat; background-position: center 12%; background-size: cover }

section#columns { width: calc(100% - 450px); max-width: 1600px; margin: 50px auto 100px auto }
section#columns .picture { display: block; border-radius: 8px; float:left; opacity: 0; width: calc(33.33% - 7px); margin-bottom: 20px; text-decoration: none; color: rgb(20,20,20)  }
section#columns .picture img { display: block; width: 100%; border-radius: 8px; height: auto; margin-bottom: 10px; transition: all .3s ease; }
section#columns .picture img:hover { box-shadow: 3px 3px 20px 0px rgba(0,0,0,0.2); }
section#columns .picture span { display: block; cursor: text; color: rgb(180,180,180) }
section#columns .picture .picture_comments { line-height: 20px }
section#columns .picture .picture_texte { line-height: 20px; padding: 0px; margin-top: 10px }

section#view_picture { display: none; cursor: pointer; position: fixed; overflow-y: auto; z-index: 100; top:0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.7) }
/*
section#view_picture #view_picture_close { display: block; z-index: 1000; position: fixed; top: 20px; right: 20px; width: 32px; height: 32px; background: url(close.svg) no-repeat center; background-size: 28px; filter: invert(1) }
section#view_picture #view_picture_close:hover { cursor: pointer; opacity: 0.8 }
*/
section#view_picture #view_picture_close { display: block; z-index: 1000; position: fixed; top: 20px; right: 20px; border-radius: 6px; text-decoration: none; background: #CD0B09; color: white; padding: 15px 20px; font-size: 20px; font-weight: 900 }

section#view_picture #view_picture_box { cursor: default; visibility: hidden; width: 100%; max-width: 800px; margin: 10% auto 0 auto; }
section#view_picture #view_picture_box #view_picture_box_img { position: relative }
section#view_picture #view_picture_box img { display: block; width: 100% }
section#view_picture #view_picture_box #view_picture_box_infos { display: flex; width: calc(100% - 20px); padding: 10px 10px 50px 10px; background: white }
section#view_picture #view_picture_box #view_picture_box_more { width: 100% }
section#view_picture #view_picture_box #view_picture_box_more p { padding: 0; margin: 0 0 10px 0; text-align: justify; line-height: 25px; white-space: pre-line }
section#view_picture #view_picture_box .view_picture_box_more_element { margin-bottom: 20px }
section#view_picture #view_picture_box .view_picture_box_more_element .view_picture_box_element_label { display: block; color: black; margin-bottom: 3px }
section#view_picture #view_picture_box .view_picture_box_more_element .picture_comments { margin-left: 20px; font-size: 12px; font-weight: 100; }
section#view_picture #view_picture_box .view_picture_box_more_element .picture_comments .picture_comment { display: flex; align-items: center; border-bottom: 1px solid rgb(240,240,240); padding: 7.5px 0 }
section#view_picture #view_picture_box .view_picture_box_more_element .picture_comments .picture_comment_text { width: 100%; text-align: justify; font-size: 14px }
section#view_picture #view_picture_box .view_picture_box_more_element .picture_comments .picture_comment_text.insult { color: rgb(200,200,200) }
section#view_picture #view_picture_box .view_picture_box_more_element .picture_comments .picture_comment_date { visibility: hidden; text-align: right; color: rgb(190,190,190); margin-left: 10px; }

*::-webkit-input-placeholder { color: black !important; }
section#view_picture #view_picture_box #view_picture_box_add { width: 400px; margin-left: 10px }
section#view_picture #view_picture_box #view_picture_box_add input, section#view_picture #view_picture_box #view_picture_box_add textarea { width: calc(100% - 20px); padding: 10px; outline: none; border: none; background: rgb(240,240,240); margin-bottom: 5px; font-size: 14px }
section#view_picture #view_picture_box #view_picture_box_add input::placeholder,
section#view_picture #view_picture_box #view_picture_box_add textarea::placeholder,
section#view_picture #view_picture_box #view_picture_box_add input::-moz-placeholder,
section#view_picture #view_picture_box #view_picture_box_add textarea::-moz-placeholder { color: black; opacity: 1 }
section#view_picture #view_picture_box #view_picture_box_add input:focus, section#view_picture #view_picture_box #view_picture_box_add textarea:focus { background: rgb(230,230,230); }
section#view_picture #view_picture_box #view_picture_box_add textarea { resize: none; height: 100px }

section#view_picture #view_picture_box #view_picture_box_add input.error,
section#view_picture #view_picture_box #view_picture_box_add textarea.error { background: rgba(204, 78, 69, 0.3) }

section#view_picture #view_picture_box #view_picture_box_add #add_comment { display: block; margin-top: 5px; font-weight: 700; width: 100%; outline: none; text-align: center; color: #CD0B09; font-size: 14px }
section#view_picture #view_picture_box #view_picture_box_add #add_comment:hover { cursor: pointer; opacity: 0.7 }
section#view_picture #view_picture_box #view_picture_box_add #add_comment:focus { text-decoration: underline }

section#view_picture #view_picture_box #view_picture_box_label_share { padding-bottom: 5px }

#picture_persons { width: 100%; margin-top: 10px; display: flex; overflow-x: auto }
#picture_persons .picture_persons_person { text-align: center; padding: 0 15px; }
#picture_persons .picture_persons_person:hover { cursor: pointer; opacity: 0.8 }
#picture_persons .picture_persons_person .person_avatar { width: 48px; height: 48px; line-height: 48px; text-align: center; border-radius: 360px; background-color: rgb(240,240,240); background-size: cover; background-repeat: no-repeat; background-position: center; color: rgb(200,200,200); margin: 0 auto 10px auto }
#picture_persons .picture_persons_person .person_name { font-size: 16px }


#fading { position: fixed; z-index: 5; pointer-events: none; bottom: 0px; left: 0; right: 0; height: 80px; background: rgb(255,255,255); background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);}
#butt_top { position: fixed; visibility: hidden; transition: opacity .4s ease; cursor: pointer; opacity: 0; z-index: 7; bottom: 20px; right: 3.5%; width: 40px; height: 40px; background: url(arrow.svg) no-repeat center; background-size: 30px; transform: rotate(180deg);  }
#butt_top:hover { opacity: 0.5 !important; }

.identification { position: absolute; border: 4px solid white; touch-action: none; pointer-events: none }

#butt_add_columns { display: none; padding: 10px; margin:-30px auto 120px auto; text-decoration: none; cursor: pointer; width: 180px; text-align: center; background: #CD0B09; color: rgb(250,250,250); border-radius: 8px }
#butt_add_columns.visible { display: block }
#butt_add_columns.visible:hover { box-shadow: 0px 0px 10px 0 rgba(205,11,9,.4) }

footer { position: absolute; top: 10px; right: 20px; }
footer a { color: rgb(200,200,200); text-decoration: none; }
footer a:hover { text-decoration: underline }

@media (max-width: 700px) {
    #butt_top { display: none; }
    #player { position: absolute; top: 5px }
    #player span { display: none; }
    #player #player_element { display: inline-block; padding: 0px; border-radius: 6px; background: transparent }
    #player #player_element:hover { background: transparent; }
    #player .player_link { display: none; }
    #player #player_link_reactions { display: inline-block; margin-top: 0; padding: 0; background: transparent; margin-left: 5px; color: black; }
    #player #player_link_reactions:hover { background: transparent; text-decoration: underline }

    #player #player_element #player_butt { filter: none !important; }


    header { width: calc(100% - 40px); margin: 60px auto 0 auto; }
    header h1 { font-size: 40px; margin-top: 40px; line-height: 35px; }
    header h2 { font-size: 20px; margin: 0px 0 20px 0; padding: 0; padding-left: 80px; }
    header p { font-size: 12px; margin-bottom: 30px }

    header #banniere { height: 160px; }
    section#columns .picture { width: 100%; font-size: 12px  }
    section#columns { width: calc(100% - 40px); margin: 50px auto }
    section#view_picture #view_picture_box { margin: auto }
    section#view_picture #view_picture_box #view_picture_box_infos { display: block }
    section#view_picture #view_picture_box #view_picture_box_infos #view_picture_box_add { width: calc(100% - 20px) }
    section#view_picture #view_picture_box #view_picture_box_add input, section#view_picture #view_picture_box #view_picture_box_add textarea { padding: 5px }
    /*
    section#view_picture #view_picture_close { height: 24px; width: 24px; background-size: 22px; }
     */
    section#view_picture #view_picture_close { font-size: 12px; padding: 7px 10px }
    #picture_persons .picture_persons_person { padding: 0 10px }
    #picture_persons .picture_persons_person .person_avatar { width: 36px; height: 36px; line-height: 36px; }
    #picture_persons .picture_persons_person .person_name { font-size: 12px }
    .identification { border: 2px solid white; }

    footer { top: 17px }

}


@media (min-width: 700px) and (max-width: 900px) {
    header h1 { font-size: 38px; }
    header p { font-size: 12px }
    section#columns .picture { width: calc(50% - 7px); font-size: 15px }
    header h2 { padding-left: 0px; font-size: 24px; margin: -8px 0 0 0; }
}

@media (min-width: 700px) and (max-width: 1200px) {
    header { width: calc(100% - 350px); }
    header #banniere { height: 250px; }
    section#columns { width: calc(100% - 250px); }
    header h2 { padding-left: 0px; font-size: 24px; margin: -8px 0 0 0; }
}