body {
font-family: 'Quicksand';
margin: 0;
padding: 0;
background-color: #212326;
}

/* */

#nuit {
background-image: url(/img/nuit.png);
background-repeat: no-repeat;
background-position: 50% 50%;
display: block;
position: fixed;
z-index: 9;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
}

/* */

/* HEADER */

#top {
background-color: #212326;
text-align: right;
}

#top ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#top li {
display: inline-block;
}

#top li a {
display: block;
padding: 1rem;
color: #FFF;
text-decoration: none;
font-size: 1.1rem;
}

#top li a:hover {
color: #f9a926;
}

#header {
background-color: #f9a926;
padding: 1rem;
color: #212326;
text-align: center;
}

#logo {
position: absolute;
vertical-align: middle;
}

#logo img {
width: 100px;
}

#menu {
display: block;
margin: 1rem 0;
}

#menu > ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu > ul > li {
display: inline-block;
font-weight: bold;
position: relative;
font-size: 1.2rem;
}

#menu > ul > li > a {
display: block;
padding: 1rem 2rem;
color: #212326;
font-weight: bold;
text-decoration: none;
}

#menu ul > li:hover > a
, #menu ul > li > a:hover
{
color: #f9a926;
background-color: #fff;
}

#menu > ul > li > ul {
display: none;
position: absolute;
z-index: 2;
margin: 0;
padding: 0;
list-style-type: none;
background-color: #FFF;
left: 0;
right: 0;
}

#menu > ul > li:hover > ul {
display: block;
}

#menu > ul > li > ul > li {
font-size: 1.1rem;
}

#menu > ul > li > ul > li > a {
display: block;
padding: 1rem;
color: #212326;
font-weight: bold;
text-decoration: none;
}

#menu > ul > li > ul > li > a:hover {
color: #f9a926;
}

#header form {
display: inline-block;
margin: 1rem 0;
}

/* HEADER */

/* DIVERS */

.menu {
text-align: center;
}

.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}

.menu li {
display: inline-block;
}

.menu li a {
display: block;
padding: 0.8rem;
color: #3db1cc;
font-weight: bold;
text-decoration: none;
font-size: 1rem;
}

.menu li a:hover {
color: #fff;
background-color: #3db1cc;
}

.menu .cubing-icon {
color: #000;
}

.DNF:after {
display: block;
content: "";
width: 250px;
height: 250px;
margin: auto;
margin-top: 2rem;
background-image: url(/img/dnf.png);
background-size: contain;
background-repeat: no-repeat;
}

.fancyTable th a:after {
content: "↑↓";
margin-left: 1rem;
color: #3db1cc;
}

.fancySearchRow input {
font-family: 'Quicksand';
padding: 0.5rem;
margin: 0.5rem auto;
border: 0;
border-radius: 5px;
width: 90% !important;
background-color: rgb(61, 177, 204, 0.1);
font-size: 1.1rem;
}

tfoot {
background-color: rgb(61, 177, 204, 0.1);
}

tfoot tr:hover {
background-color: rgb(61, 177, 204, 0.1);
}

.btn.btn-light {
padding: 0.5rem;
}

.btn.btn-light.active {
text-decoration: none !important;
}

select {
font-family: 'Quicksand';
font-size: 1.2rem;
padding: 1rem;
border: none;
border-radius: 5px;
max-width: 50%;
}

input[type=text] {
font-family: 'Quicksand';
font-size: 1.2rem;
padding: 1rem;
border: none;
border-radius: 5px;
max-width: 50%;
}

input[type=number] {
font-family: 'Quicksand';
font-size: 1.2rem;
padding: 1rem;
border: none;
border-radius: 5px;
max-width: 50%;
}

input[type=submit] {
font-family: 'Quicksand';
font-size: 1.2rem;
padding: 1rem;
background-color: rgba(255, 255, 255, 0.7);
border: none;
border-radius: 5px;
cursor: pointer;
margin-left: 0.5rem;
}

input[type=submit]:hover {
background-color: #fff;
}

textarea {
font-family: 'Quicksand';
font-size: 1.2rem;
padding: 1rem;
border: none;
border-radius: 5px;
}

/*
.highcharts-container:before {
display: block;
padding: 0.5rem;
text-align: center;
content: "Les données peuvent être affichées/cachées en cliquant sur les étiquettes sous l'axe horizontal.";
font-size: 0.8rem;
opacity: 0.8;
}
*/

/* DIVERS */

/* CONTENT */

#content_wrapper {
background-color: #f9f9fb;
padding: 2rem 5%;
}

#content {}

#content table a {
color: #000;
text-decoration: underline;
}

#content a:hover {
text-decoration: none;
}

h1 {
text-align: center;
font-size: 2.8rem;
}

h2 {
text-align: center;
color: #d9472b;
font-size: 2.5rem;
}

h2 a {
color: #d9472b;
text-decoration: underline;
}

h2 a:hover {
text-decoration: none;
}

h3 {
text-align: center;
color: #3db1cc;
font-size: 2rem;
}

h3 a {
color: #3db1cc;
text-decoration: underline;
}

h3 a:hover {
text-decoration: none;
}

h4 {
text-align: center;
}

div {
box-sizing: border-box;
}

div.table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

table {
width: 100%;
border: 1px solid #dcdcdc;
border-collapse: collapse;
border-spacing: 0;
background-color: #fff;
}

th
, td
{
padding: 10px;
border: 1px solid #dcdcdc;
vertical-align: middle;
}

th {
background: #f6f6f6;
}

tr {}

tr:nth-child(2n) {
background-color: #f6f6f6;
}

tr:hover {
background-color: rgb(61, 177, 204, 0.5);
}

.highlight {
background-color: rgb(249, 169, 38, 0.5) !important;
}

.highlight:hover {
background-color: rgb(249, 169, 38, 1) !important;
}

.highlight span {
display: inline-block;
background-color: #f9a926;
padding: 5px;
font-size: 0.7rem;
border-radius: 50px;
vertical-align: middle;
position: absolute;
margin-left: 1rem;
}

.col-2 > div {
width: 50%;
}

.col-2 > div:first-child {
float: left;
padding-right: 2%;
}

.col-2 > div:last-child {
float: right;
padding-left: 2%;
}

.avatar_thumb {
width: 50px;
height: 50px;
border-radius: 50%;
vertical-align: middle;
display: inline-block;
margin-right: 1rem;
}

.leaflet-marker-icon {
width: 50px !important;
height: 50px !important;
border-radius: 50%;
}

form.requetes > div {
padding: 1rem;
}

form.requetes input
, form.requetes select
, form.requetes span
{
margin-right: 1rem;
}

.avatar_gen > div {
position: absolute;
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
image-rendering: pixelated;
}

/* CONTENT */

/* PERSON */

#content .rank_country {
color: #3db1cc;
}

#content .rank_world {
color: #f9a926;
}

#avatar_flag {
float: right;
position: relative;
}

#avatar_flag .avatar {
width: 200px;
height: 200px;
border-radius: 50%;
background-size: cover;
background-position: center;
}

#avatar_flag .flag {
width: 100px;
border-radius: 50%;
position: absolute;
bottom: -1rem;
left: -1rem;
}

#avatar_flag .avatar_gen {
width: 100px;
height: 100px;
position: absolute;
bottom: -2rem;
right: -2rem;
}

/* PERSON */

/* COMPETITIONS */

#competitions #cities_table span {
display: block;
padding: 0.2rem;
margin: 0.2rem;
}

/* COMPETITIONS */

/* COMPETITION */

#competition .record {
display: block;
}

#competition .result {
display: inline-block;
padding: 0.2rem;
margin: 0.2rem;
margin-right: 1rem;
background-color: rgb(249, 169, 38, 1);
border-radius: 1rem;
}

#competition .country {
height: 18px;
vertical-align: middle;
margin-right: 1rem;
}

#competition .country img {
height: 18px;
}

#competition .person {
padding: 0.2rem;
margin: 0.2rem;
}

/* COMPETITION */

/* HOME */

#home .avatar_gen_wrapper.dim2 .avatar_gen
, #twisty_cubic .avatar_gen_wrapper.dim2 .avatar_gen 
{
width: 100px;
height: 100px;
position: relative;
float: right;
}

.avatar_gen_wrapper.dim3 {
--width: 75px;
}

.avatar_gen_wrapper.dim3 {
width: calc(var(--width)*1.35);
height: calc(var(--width)*1.20);
display: inline-block;
vertical-align : middle;
float: left;
position: relative;
}

.avatar_gen_wrapper.dim3 .avatar_gen_container {
width: 100%;
height: 100%;
position: relative;
}

.avatar_gen_wrapper.dim3 .avatar_gen_container:after {
content: "";
position: absolute;
width: 140%;
height: calc(var(--width)*0.5);
background: #000;
bottom: calc(var(--width)*-0.18);
right: -20%;
border-radius: 50%;
opacity: 0.05;
}

.avatar_gen_wrapper.dim3 .avatar_gen > div {
width: auto !important;
height: auto !important;
position: absolute;
top: -25%;
bottom: -25%;
left: -25%;
right: -25%;
background-size: cover !important;
background-position: center !important;
}

.avatar_gen_wrapper.dim3 .avatar_gen > div.avatar_base
, .avatar_gen_wrapper.dim3 .avatar_gen > div.avatar_color
, .avatar_gen_wrapper.dim3 .avatar_gen > div.avatar_finish
{
background-size: 138% !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
}

.avatar_gen_wrapper.dim3 .avatar_gen > div.avatar_eyes {
top: -25%;
bottom: -25%;
left: -23%;
right: -27%;
}

.avatar_gen_wrapper.dim3 .avatar_gen > div.avatar_glasses {
top: -25%;
bottom: -35%;
left: -23%;
right: -37%;
}

.avatar_gen_wrapper.dim3 .avatar_gen > div.avatar_whisker {
top: -30%;
bottom: -30%;
left: -23%;
right: -37%;
}

.avatar_gen_wrapper.dim3 .avatar_gen.bottom_right {
width: var(--width);
height: var(--width);
position: absolute;
z-index: 1;
}

.avatar_gen_wrapper.dim3 .avatar_gen.right {
width: var(--width);
height: var(--width);
position: absolute;
z-index: 2;
}

.avatar_gen_wrapper.dim3 .avatar_gen.bottom_left {
width: var(--width);
height: var(--width);
position: absolute;
z-index: 3;
}

.avatar_gen_wrapper.dim3 .avatar_gen.top {
width: var(--width);
height: var(--width);
position: absolute;
z-index: 4;
}

.avatar_gen_wrapper.dim3 .avatar_gen.left {
width: var(--width);
height: var(--width);
position: absolute;
z-index: 5;
}

.avatar_gen_wrapper.dim3 .avatar_gen.face {
width: var(--width);
height: var(--width);
position: absolute;
z-index: 6;
}

/* CUBE */

.avatar_gen_wrapper.dim3.cube .avatar_gen.top {
bottom: calc(var(--width)*0.58);
right: calc(var(--width)*0.17);
transform: scale(0.99, 0.18) skew(20deg, -26deg);
}

.avatar_gen_wrapper.dim3.cube .avatar_gen.top .avatar_base
, .avatar_gen_wrapper.dim3.cube .avatar_gen.top .avatar_color
, .avatar_gen_wrapper.dim3.cube .avatar_gen.top .avatar_finish
{
border-radius: 8% 0 7% 0;
overflow: hidden;
}

.avatar_gen_wrapper.dim3.cube .avatar_gen.top .avatar_color {
filter: brightness(1.);
}

.avatar_gen_wrapper.dim3.cube .avatar_gen.left {
right: calc(var(--width)*0.66);
bottom: calc(var(--width)*0.045);
transform: scale(0.35, 1) skew(0, 10deg);
}

.avatar_gen_wrapper.dim3.cube .avatar_gen.left .avatar_base
, .avatar_gen_wrapper.dim3.cube .avatar_gen.left .avatar_color
, .avatar_gen_wrapper.dim3.cube .avatar_gen.left .avatar_finish
{
border-radius: 6% 0 0 0;
overflow: hidden;
}

.avatar_gen_wrapper.dim3.cube .avatar_gen.left .avatar_color {
filter: brightness(0.7);
}

.avatar_gen_wrapper.dim3.cube .avatar_gen.face {
bottom: 0;
right: 0;
transform: skew(0, -5deg);
}

.avatar_gen_wrapper.dim3.cube .avatar_gen.face .avatar_base
, .avatar_gen_wrapper.dim3.cube .avatar_gen.face .avatar_color
, .avatar_gen_wrapper.dim3.cube .avatar_gen.face .avatar_finish
{
border-radius: 0 3% 0 0;
overflow: hidden;
}

/* CUBE */

/* ANIM */

.avatar_gen_wrapper.dim3 div.avatar_gen_container {
animation: all infinite 0.5s alternate-reverse;
}

.avatar_gen_wrapper.dim3 div.avatar_gen_container .avatar_eyes {
animation: eyes infinite 5s alternate-reverse;
}

.avatar_gen_wrapper.dim3 div.avatar_gen_container .avatar_whisker {
animation: whisker infinite 0.5s alternate-reverse;
}

.avatar_gen_wrapper.dim3 div.avatar_gen_container .avatar_glasses {
animation: glasses infinite 0.5s alternate-reverse;
}

@keyframes all {

from {
transform: scale(100%, 100%) translate(0%, 0%);
}
to {
transform: scale(100%, 105%) translate(0%, -3%);
}

}

@keyframes eyes {

0% {
transform: scale(100%, 100%) translate(0%, 0%);
}
48%
{
transform: scale(100%, 100%) translate(0%, 0%);
}
50%
{
transform: scale(100%, 15%) translate(0%, -20%);
}
52%
{
transform: scale(100%, 100%) translate(0%, 0%);
}
100% {
transform: scale(100%, 100%) translate(0%, 0%);
}

}

@keyframes whisker {

0% {
transform: scale(100%, 100%) translate(0%, 0%);
}
100% {
transform: scale(100%, 100%) translate(0%, -1%);
}

}

@keyframes glasses {

0% {
transform: scale(100%, 100%) translate(0%, 0%);
}
100% {
transform: scale(100%, 100%) translate(0%, -2%);
}

}

/* ANIM */

#pr_streak_caption {
text-align: center;
padding: 10px;
}

#pr_streak_caption ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#pr_streak_caption li {
display: inline-block;
margin: 0  10px;
}

#pr_streak_caption li:before {
content: "";
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
background-position: center;
}

#pr_streak_caption .single_PR:before {
background-image: url(/img/single_50.png);
}

#pr_streak_caption .single_now:before {
background-image: url(/img/single_100.png);
}

#pr_streak_caption .average_PR:before {
background-image: url(/img/average_50.png);
}

#pr_streak_caption .average_now:before {
background-image: url(/img/average_100.png);
}

#pr_streak_tab {
margin-left: 100px;
}

#pr_streak_tab tr {
white-space: nowrap;
}

#pr_streak_tab th
, #pr_streak_tab td
{
display: inline-block;
width: 75px !important;
height: 75px !important;
padding: 0;
overflow: hidden;
background-size: cover;
}

#pr_streak_tab tr th:nth-child(1)
, #pr_streak_tab tr td:nth-child(1)
{
position: absolute;
margin-left: -77px;
text-align: center;
line-height: 75px;
}

#pr_streak_tab th.single_PR {
background-image: url(/img/single_25.png);
}

#pr_streak_tab th.average_PR {
background-image: url(/img/average_25.png);
}

#pr_streak_tab th.single_PR.average_PR {
background-image: url(/img/single_25.png), url(/img/average_25.png);
}

#pr_streak_tab td.single_PR {
background-image: url(/img/single_50.png);
}

#pr_streak_tab td.single_now {
background-image: url(/img/single_100.png);
}

#pr_streak_tab td.average_PR {
background-image: url(/img/average_50.png);
}

#pr_streak_tab td.average_now {
background-image: url(/img/average_100.png);
}

#pr_streak_tab td.single_PR.average_PR {
background-image: url(/img/single_50.png), url(/img/average_50.png);
}

#pr_streak_tab td.single_now.average_now {
background-image: url(/img/single_100.png), url(/img/average_100.png);
}

#pr_streak_tab td.single_now.average_PR {
background-image: url(/img/single_100.png), url(/img/average_50.png);
}

#pr_streak_tab td.single_PR.average_now {
background-image: url(/img/single_50.png), url(/img/average_100.png);
}

#pr_streak_tab td.results div {
display: block;
text-align: center;
line-height: calc(75px/2);
rotate: -45deg;
}

#pr_streak_tab td.single_now .single
, #pr_streak_tab td.average_now .average
{
font-weight: bold;
}

#pr_streak_tab th.competition span {
display: block;
rotate: -45deg;
font-size: 10px;
line-height: calc(75px/2);
}

#pb_goals_form input[type=text] {
font-size: 1rem;
background-color: rgb(249, 169, 38, 0.25);
}

#pb_goals_form .pb_overall input[type=text] {
background-color: rgb(217, 71, 43, 0.25);
}

#pb_goals_form .pb_equal input[type=text] {
background-color: rgb(217, 71, 43, 0.25);
}

#cubes_form textarea {
background-color: rgb(249, 169, 38, 0.25);
border: 0;
width: calc(100% - 2rem);
}

#cubes_form tbody tr {
cursor: pointer;
}

#cubes_form .selected {
background-color: rgb(249, 169, 38, 0.25);
}

#twisty_cubic_upload_form {
text-align: center;
}

#twisty_cubic_upload_form input[type=file] {
background-color: rgb(249, 169, 38, 0.25);
font-family: 'Quicksand';
padding: 0.5rem;
margin: 0.5rem auto;
border: 0;
border-radius: 5px;
font-size: 1.1rem;
}

#pb_goals_submit
, #cubes_submit
, #twisty_cubic_upload_submit
{
text-align: center;
}

#pb_goals_submit input[type=submit]
, #cubes_submit input[type=submit]
, #twisty_cubic_upload_submit input[type=submit]
{
background-color: rgb(61, 177, 204, 1);
color: #FFF;
margin: 1rem;
}

#pb_goals_submit input[type=submit]:hover
, #cubes_submit input[type=submit]:hover
, #twisty_cubic_upload_submit input[type=submit]:hover
{
background-color: rgb(61, 177, 204, 0.5);
}

/* HOME */

/* FOOTER */

#footer {
background-color: #212326;
padding: 1rem;
color: #FFF;
}

#footer a {
color: #FFF;
font-size: 1.1rem;
}

#footer a:hover {
text-decoration: none;
}

#footer ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#footer li {
display: inline-block;
margin-right: 2rem;
}

#footer li img {
transition: all 0.25s ease 0s;
background-color: #f9a926;;
border-radius: 5px;
vertical-align: middle;
}

#footer li img:hover {
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}

/* FOOTER */

@media (max-width: 1300px) {

#header form {
display: block;
}

.col-2 > div {
width: 100%;
}

.col-2 > div:first-child {
float: none;
padding-right: 0;
}

.col-2 > div:last-child {
float: none;
padding-left: 0;
}
  
#logo {
position: relative;
}
  
#logo img {
width: 75px;
}
  
#avatar_flag .avatar {
width: 80px;
height: 80px;
}

#avatar_flag .flag {
width: 40px;
}
  
#avatar_flag .avatar_gen {
width: 50px;
height: 50px;
bottom: -1.5rem;
right: -1.5rem;
}

}