@import url('https://fonts.googleapis.com/css?family=Roboto');

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}

sup {vertical-align: super;font-size: smaller;text-transform: none;}
b, strong{font-weight:bold;}
i{font-style:italic;}
.tac{text-align: center;}
.tal{text-align: left;}
.tar{text-align: right;}
.dt{display:table;width:100%;}
.dtr{display:table-row;}
.dtc{display:table-cell;}
.vam{vertical-align: middle;}
.vat{vertical-align: top;}
.vab{vertical-align: bottom;}

.display_mobile {display:none;}

html, body {width: 100%;min-height: 100%;font-family:'Roboto', 'Arial', sans-serif;font-size:16px;line-height:1.5em;}
body {background:url(../img/fond.svg) no-repeat left top fixed #FFF;background-size: cover;position: relative;line-height:1.2em;color:#343434;}
body *{box-sizing:border-box;}
a {text-decoration:underline;color:#000;}

#main_content {width:96%;max-width:1300px;margin:2rem auto;}

.flag img{height:35px;width:53px;border-radius:15px;vertical-align: top;}
.blason img{max-width: 90px;max-height: 90px;vertical-align: top;}
.valid_message {color: #02953b;text-align: center;font-size: 0.8rem;margin-top: 0.5rem;margin-bottom: 0.5rem;border-radius: 5px;background: white;border: 2px solid #02953b;width: 240px;margin: 1rem auto;}

#header{border-radius:5px;padding:2rem;display:flex;justify-content: space-between;margin-bottom:3.5rem;align-items: center;margin-top:4rem;background:#000000;}
#header a {color:white;}
#header #logo_site {text-align: left;width:300px;}
#header #logo_site img {max-width: 200px;max-height: 100px;width:100%;}
#header #logo_event {text-align: center;width:300px;}
#header #infos_panel {text-align: right;width:300px;line-height:2.5;color:white;}
#header #infos_panel #nom_panel {font-size:1.2rem;}
#header #infos_panel #nom_panel > span {display:inline-block;vertical-align: middle;margin:0 5px;}
#header #infos_panel #nom_panel > span.flag img {vertical-align: middle;}
#header #infos_panel #classement_panel {margin-bottom: 0.5rem;font-size: 1rem;line-height: 1;}
#header #btn_connexion {display:inline-block;max-width:200px;background: white;color: #f9520b;font-weight: bold;padding:0.35rem 1.5rem;border-radius:20px;line-height:1.2;text-decoration:none;font-style:inherit;text-align: center;}

.match {margin-bottom:1.5rem;}
div > .match:nth-last-child(1) {margin-bottom:0;}
.match .hour {text-align:center;display:block;font-size:0.9rem;margin-bottom:0.5rem;}
.match .content_match {background: rgba(255,255,255,0.2);border-radius: 5px;padding: 0.5rem;position:relative;}
.match .versus {display:flex;color:#F2EFE9;justify-content: space-between;align-items: center;gap:1rem;}
.match .versus .score{flex:1;}
.equipes_scores{display: flex;justify-content:space-evenly;align-items:center;text-align: center;}
.equipes_scores .equipe{width:100px;text-align: center;}
.equipes_scores .vs{font-size: 1.6rem;letter-spacing: 3px;}
.equipes_scores .flag_name{text-align: center;margin-bottom:0.4rem;}
.equipes_scores .score_flag{text-align: center;display: block;font-size: 1.3rem;font-weight: bold;}
.match .versus input {-webkit-appearance: none;outline: none;border: none;width: 50px;padding: 0.5rem;text-align: center;font-size: 1.1rem;border-radius: 10px;margin:0 0.4rem;background-color:white;box-shadow: inset 3px 3px 6px #0000007B;}

#matchs_a_venir .match, #matchs_precedents .match{margin-bottom:0.5rem;border-bottom:1px solid rgba(255,255,255,0.2);padding-bottom: 0.5rem;}
#matchs_a_venir .match:nth-last-child(1), #matchs_precedents .match:nth-last-child(1){margin-bottom:0;padding-bottom: 0;border-bottom: 0;}
#matchs_a_venir .match .flag, #matchs_precedents .match .flag{flex:1;}
#matchs_a_venir .match .equipes_scores, #matchs_precedents .match .equipes_scores{max-width: 200px;}

.jour {text-align:center;display:block;font-size:0.9rem;margin-bottom:0.5rem;}
.jour_matchs {background: rgba(255,255,255,0.2);border-radius: 5px;padding:0.5rem 0.5rem 1rem;position:relative;margin-bottom:1.5rem;}
.jour_matchs:nth-last-child(1){margin-bottom:0;}

.match .flag {padding:0;background:transparent;text-align: center;width:90px;margin:0;}
.match .flag .flag_name {font-size:0.9rem;margin-top:0.5rem;white-space: break-spaces;}
.match .message {font-style:italic;color:#F2EFE9;text-align: center;font-size:0.85rem;}
.match .btn_submit {border: none;cursor: pointer;background-color: white;padding: 0.25rem 0.65rem;border-radius: 5px;position: absolute;bottom: 0;left: 50%;transform: translateX(-50%) translateY(45%);color:#8C2137;text-transform: uppercase;font-size:0.85rem;font-weight: bold;}
.matches .login_required {margin-bottom:1.5rem;text-align:center;color:red;font-size:0.9rem;}


#upcoming_top {display: flex;align-items:flex-start;justify-content:space-between;margin-bottom:3.5rem;}
#upcoming_top.solo {justify-content:center;}
#upcoming_top #upcoming {width:40%;min-width: 530px;}

#upcoming_top .title {font-weight: bold;font-size: 1.2rem;text-align: center;margin-bottom: 1.5rem;font-weight: 300;font-size: 23px;}
#upcoming_top #top {width: 55%;}
#upcoming_top #top .block_blanc{background: white;border-radius: 5px;padding: 1.5rem 2.5rem;margin-bottom:3rem;box-shadow: 1px 1px 10px 1px #2b0410;}

#upcoming .liste_matches {color:#F5B811;border:7px solid #F5B811;border-radius:5px;background:#FDFCED;margin-bottom:3rem;position:relative;padding: 1.5rem 2.5rem;box-shadow: 5px 5px 12px #00000031;}
#upcoming .liste_matches .title {font-weight: 300;font-size: 23px;}

#upcoming #matchs_precedents {color:#0499f9;border:7px solid #0499f9;border-radius:5px;background:#FDFCED;}
#upcoming #matchs_precedents .jour_matchs {background:#0499f9;}

#history {background:#e6e8eb;border-radius:15px;padding:2rem;position:relative;border:1px solid #0084a4;}
#history #list_history {display:flex;align-items:flex-start;justify-content:space-evenly;}



#upcoming_top #top #classement {border:7px solid #FA808D;    box-shadow: 5px 5px 12px #00000031;}
#upcoming_top #top #classement .title_block {color:#FA808D;font-weight: 300;font-size: 23px;}

#upcoming #matchs_du_jour {border-color:#F9520B;color:#F9520B;}
#upcoming #matchs_du_jour .content_match {background: #F9520B;}
#upcoming #matchs_du_jour .content_match .btn_submit{border:3px solid #F9520B;color:#F9520B;}

#upcoming #matchs_a_venir .jour_matchs {background: #F5B811;}
#upcoming #matchs_a_venir .btn_submit {border:3px solid #F5B811;color:#F5B811;}


.title_block{font-weight:bold;font-size:1.2rem;text-align: center;margin-bottom:1.5rem;}

#rules_remind {display:flex; justify-content:space-between;}
#rules_remind > div:nth-child(1) {width:47%;}
#rules_remind > div:nth-child(2) {width:50%;}
#rules_remind > div {border-radius: 5px;padding: 1rem;position: relative;background-color:#02953B;color:#F0EFD8;}
#rules_remind > div .content {font-size:0.85rem;}
#rules_remind .prize {display:flex;align-items: center;flex-direction: column;border-bottom: 1px solid rgba(255,255,255,0.5);padding-bottom:0.15rem;margin-bottom:0.15rem;}
#rules_remind .prize:nth-last-child(1){border-bottom:0;margin-bottom:0;padding-bottom: 0;}
#rules_remind .prize .place {display:inline-block;border-radius:1rem;font-weight:bold;font-size:0.8rem;}
#rules_remind .prize .prize_desc {align-self:center;}
#rules_remind .subtitle {text-align: center;font-size:1rem;font-weight:bold;margin-bottom: 1rem;}

#classement #pages_classement{position:relative;overflow:hidden;}
#classement #pages_classement .page{position:absolute;opacity:0;left:100%;width:100%;transition:all ease 0.3s;top:0;}
#classement #pages_classement .page:nth-child(1){position:relative;left:0;opacity:1;}

#classement .classement_pagination {text-align: center;color:#B9B9B9;margin-top:1rem;}
#classement .classement_pagination a {font-weight:bold;font-size:1.2rem;color:#B9B9B9;font-style:normal;text-decoration:none;transition:all ease 0.3s;}
#classement .classement_pagination a.current {font-size:1.3rem;color:#8C2137;}


#classement .ligne_score{display:flex;align-items:center;border-bottom:1px solid #CCC;padding: 0.5rem;transition:all ease 0.3s;}
#classement .ligne_score:hover{background-color: #EAEAEA;}
#classement .ligne_score.current{background-color:#fdcacf;}
#classement .ligne_score .position {font-weight: bold;font-size: 1.4rem;color: #FA808D;width: 65px;text-align: center;}
#classement .ligne_score .infos{flex:1;display:flex;align-items:center;gap: 0.2rem;}
#classement .ligne_score  .flag{border-radius: 7px;}
#classement .ligne_score  .flag img{max-width: 25px;height: inherit;margin-right: 1rem;}

.login_required{color:white;text-align: center;font-size:0.8rem;margin-bottom: 0.5rem;font-style:italic;}


#upcoming_top #top #rules {background: #FDFCED;border-radius: 5px;padding: 1.5rem 2.5rem;margin-bottom: 3rem;border: 7px solid #02953B;box-shadow: 5px 5px 12px #00000031;}

#upcoming_top #top #rules .title_block {color:#02953B;font-weight: 300;font-size: 23px;}

#footer {    text-align: center;}

/* Smartphones et tablettes ----------- */
@media only screen
and (max-width : 1024px) {

	#upcoming_top {flex-direction:column;}
	#upcoming_top #upcoming {width:100%;margin-bottom:3.5rem;min-width:inherit}
	#upcoming_top #top {width:100%;}


	#history #list_history {flex-direction:column;align-items:center;}
	#history #list_history .jour:nth-child(1) {margin-bottom:3rem;}
	.fancybox-slide--html .fancybox-close-small {position:fixed;}

   
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 767px) {

	.match .message {margin-top:1rem;}
	#header{flex-direction:column;padding:1rem;margin-top: 6rem;}
	#header > * {width:100%;margin-bottom:1.5rem;}
	#header > *:nth-last-child(1) {margin-bottom:0;}
	#header #logo_site {order:2;text-align:center;}
	#header #logo_event {order:1;}
	#header #logo_event img {max-width: 200px;}
	#header #infos_panel {order:3;    background-color: rgba(0, 0, 0, 0.25);border-radius: 5px;padding: 0.5rem;text-align: center;}

	.match .btn_submit {padding: 0.5rem 1rem;transform: translateX(-50%) translateY(60%);}

	#matchs_du_jour .equipes_scores > div {width:33%!important;}

	.equipes_scores .vs {font-size: 1rem;letter-spacing: 0px;}
	#matchs_a_venir .match .equipes_scores, #matchs_precedents .match .equipes_scores {margin: 0 auto;max-width: 100%;}
	#matchs_a_venir .match, #matchs_precedents .match {margin-bottom:1rem;padding-bottom:1rem;}
	.equipes_scores .equipe{width:50%;}
	.jour_matchs {margin-bottom:2.5rem;}
	#matchs_precedents .equipes_scores .vs{width:55px;}

	.match .versus {flex-wrap: wrap;max-width: 300px;margin: 0 auto;}
	.match .versus .blason:nth-child(1) {order:1;width: 100px;text-align: center;}
	.match .versus .blason:nth-child(3) {order:2;width: 100px;text-align: center;}
	.match .versus .score {order:3;width:100%;flex-basis:100%;}

	#rules_remind {flex-direction:column;}
	#rules_remind > * {width:100%!important;margin:0!important;}
	#rules_remind > *:nth-child(1) {margin-bottom:1.5rem!important;}

	#upcoming_top #top .block_blanc {padding:0.5rem;}

	#classement .ligne_score .infos{gap: 0.2rem;flex-wrap: wrap;padding: 0 0.5rem;}

	#upcoming .liste_matches  {padding:1rem;}
	#upcoming_top #top #rules {padding:1rem;}
	#upcoming_top #top .block_blanc {padding:1rem;}

}


/* Tablettes (portrait and landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {


}