#home { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; width: 100%; height: 100%; background: rgb(44,83,100); background: -moz-linear-gradient(-45deg,  rgba(44,83,100,1) 0%, rgba(32,58,67,1) 50%, rgba(15,32,39,1) 100%); background: -webkit-linear-gradient(-45deg,  rgba(44,83,100,1) 0%,rgba(32,58,67,1) 50%,rgba(15,32,39,1) 100%); background: linear-gradient(135deg,  rgba(44,83,100,1) 0%,rgba(32,58,67,1) 50%,rgba(15,32,39,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c5364', endColorstr='#0f2027',GradientType=1 ); }
#home #homeButtons { position: absolute; top: 50%; left: 50%; width: 100%; max-width: 300px; transform: translateX(-50%) translateY(-50%); }
#home #homeButtons #step0 { display: block; }
#home #homeButtons #step0 #start { display: block; font-size: 16px; color: #FFFFFF; font-weight: bold; text-transform: uppercase; padding: 8px 15px; margin: 0 auto; border-radius: 2rem; border: 1px solid #FFFFFF; background: #2C5364; }


#home #homeButtons #step1 { display: none; }
#home #homeButtons #step1 #nbPlayers { display: block; width: 75%; font-size: 16px; padding: 5px 8px; margin: 0 auto; border-radius: 2rem; text-align: center; background: #FFFFFF; }
#home #homeButtons #step1 label #gameType { display: none; }
#home #homeButtons #step1 label .fakeBox { width: 100px; height: 32px; margin: 15px auto; border: 1px solid #FFFFFF; border-radius: 4px; -webkit-box-shadow: 0 0 5px 3px rgba(255,255,255,.5); box-shadow: 0 0 5px 3px rgba(255,255,255,.5); }
#home #homeButtons #step1 label .fakeBox .wrapper { position: relative; width: 100%; height: 100%; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; align-items: center; }
#home #homeButtons #step1 label .fakeBox .wrapper .scoreInit { position: absolute; top: 0; bottom: 0; width: 50px; font-family: 'Arial'; font-size: 16px; color: #FFFFFF; text-align: center; }
#home #homeButtons #step1 label .fakeBox .wrapper .score301 { left: 0; border-radius: 4px 0 0 4px; background: #2193b0; background: -webkit-linear-gradient(to top, #6dd5ed, #2193b0); background: linear-gradient(to top, #6dd5ed, #2193b0); }
#home #homeButtons #step1 label .fakeBox .wrapper .score501 { right: 0; border-radius: 0 4px 4px 0; background: #EB3349; background: -webkit-linear-gradient(to top, #F45C43, #EB3349); background: linear-gradient(to top, #F45C43, #EB3349); }
#home #homeButtons #step1 label .fakeBox .wrapper .scoreInit .wrapper { position: relative; width: 100%; height: 100%; }
#home #homeButtons #step1 label .fakeBox .wrapper .scoreInit .wrapper span { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }
#home #homeButtons #step1 label .fakeBox .wrapper .circle { position: absolute; top: -1px; left: 45px; bottom: 0; border: none; width: 55px; border-radius: 4px; transition: all 400ms ease-out; background: #B0B0B0; background: #8e9eab; background: -webkit-linear-gradient(to top, #eef2f3, #8e9eab); background: linear-gradient(to top, #eef2f3, #8e9eab); }
#home #homeButtons #step1 label #gameType:checked + .fakeBox .wrapper .circle { left: 0; }
#home #homeButtons #step1 #validStep1 { display: block; font-size: 16px; color: #FFFFFF; font-weight: bold; text-transform: uppercase; padding: 8px 15px; margin: 0 auto; border-radius: 2rem; border: 1px solid #FFFFFF; background: #2C5364; }


#home #homeButtons #step2 { display: none; }
#home #homeButtons #step2 h2 { font-family: 'Arial'; font-size: 18px; color: #FFFFFF; font-weight: bold; text-align: center; text-transform: uppercase; padding: 10px 30px 15px 30px; }
#home #homeButtons #step2 #formUserNames input[type="text"] { display: block; width: 75%; font-size: 16px; text-transform: uppercase; text-align: center; padding: 8px; margin: 0 auto 15px; border-radius: 2rem; border: none; }
#home #homeButtons #step2 #validStep2 { display: block; font-size: 16px; color: #FFFFFF; font-weight: bold; text-transform: uppercase; padding: 8px 15px; margin: 0 auto; border-radius: 2rem; border: 1px solid #FFFFFF; background: #2C5364; }


#home #score { position: absolute; top: 0; bottom: 0; left: 50%; display: none; width: 100%; max-width: 320px; transform: translateX(-50%); overflow: hidden; }
#home #score ul { font-size: 0; height: 100%; }
#home #score ul li { position: relative; display: inline-block; height: 100%; vertical-align: top; text-align: center; border-left: 1px solid #FFFFFF; }
#home #score ul li span { display: block; font-family: 'Arial'; font-size: 12px; color: #FFFFFF; padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,.15); }
#home #score ul li span.name { font-size: 16px; font-weight: bold; text-transform: uppercase; padding: 15px 0; border-bottom: 1px solid #FFFFFF; }
#home #score ul li:first-child { border-left: none; }
#home #score ul li.player1 { width: 100%; }
#home #score ul li.player2 { width: 50%; }
#home #score ul li.player3 { width: 33.3333%; }
#home #score ul li.player4 { width: 25%; }
#home #score ul li.player5 { width: 20%; }
#home #score ul li.player6 { width: 16.6666%; }
#home #score ul li .points { position: absolute; left: 0; right: 0; bottom: 0; }
#home #score ul li .points .calc { display: block; padding: 5px; font-size: 16px; font-family: 'Arial'; color: #2C5364; text-decoration: none; background: #FFFFFF; }
#home #score ul li .points input[type="number"] { width: 100%; border: none; font-size: 16px; padding: 5px; text-align: center; border: 1px solid #2C5364; }
#home #score ul li .points button { width: 100%; font-size: 16px; font-weight: bold; text-align: center; color: #2C5364; padding: 5px; background: #FFFFFF; border: 1px solid #2C5364; }


#calculator { position: absolute; top: 50%; left: 50%; display: none; width: 80%; padding: 20px 0; border-radius: 8px; background: #FFFFFF; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }
#calculator ul { font-size: 0; }
#calculator ul li { display: inline-block; width: 33.3333%; font-size: 16px; text-align: center; padding: 5px; vertical-align: top; }
#calculator ul li input[type="checkbox"] { display: none; }
#calculator ul li .fakeButton { position: relative; width: 36px; min-height: 36px; margin: 0 auto; text-align: center; border-radius: 4px; border: 1px solid #2C5364; background: #FFFFFF; }
#calculator ul li .fakeButton .wrapper { position: relative; width: 36px; height: 36px; }
#calculator ul li .fakeButton .wrapper span { position: absolute; top: 50%; left: 50%; font-family: 'Arial'; font-size: 16px; font-weight: bold; color: #2C5364; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }
#calculator ul li input[type="checkbox"]:checked + .fakeButton { border: 1px solid #FFFFFF; background: #2C5364; }
#calculator ul li input[type="checkbox"]:checked + .fakeButton .wrapper span { color: #FFFFFF; }
#calculator ul li input[type="number"] { width: 80%; font-family: 'Arial'; font-size: 16px; text-align: center; padding: 5px 8px; border: none; border-radius: 4px; border: 1px solid #2C5364; background: #FFFFFF; }
#calculator #calcSubmit { display: block; font-size: 16px; color: #FFFFFF; font-weight: bold; text-transform: uppercase; padding: 8px 15px; margin: 10px auto; border-radius: 2rem; border: 1px solid #FFFFFF; background: #2C5364; }


.refresh { position: fixed; top: 0; right: 0; font-weight: bold; font-size: 32px; color: #FFFFFF; text-decoration: none; padding: 0 5px; }