@font-face {
	font-family: 'Henny_Penny';
	src: url('../fonts/HennyPenny-Regular.ttf');
}
@font-face {
	font-family: 'Patrick_Hand';
	src: url('../fonts/PatrickHand-Regular.ttf');
}

/* ********************** BASE ********************** */

html, body, button, .container, .container-fluid, 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, input, 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, .row, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0; 
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	box-sizing: border-box;
	color: rgb(0, 10, 30);
	font-family: 'Patrick_Hand', cursive; letter-spacing: 0.5px;
}

select, option {
    letter-spacing: 0.5px !important;
}

*::selection{
	color: white;
	background: rgb(0, 10, 30)
}

body {
    min-height: 100vh;
    padding: 4vh 0;
    background-image: url("../img/background.jpg"); 
    background-size: 120% 120%; 
    background-position: center; 
    background-repeat: no-repeat;
    
}

.container-fluid {
    min-height: 92vh;
    width: 85%; 
    margin: 0 auto;
    background-color: white; 
    padding: 3vh 4em; 
    border-radius: 10px; 
    box-shadow: rgba(0, 0, 0, 0.6) 0.1em 0.1em 1em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

main {
    min-height: 50vh;
    position: relative;
    z-index: 1;
}

.circle {
    /* border: #f7cc99 solid 5px; */
    /* border-radius: 50%; */
    position: absolute;
}

/* .circle::before {
    content: "";
    float: left;
    padding-top: 100%;
} */

#circle1 {
    width: 11.8%;
    top: 15%;
    left: 4%;
    opacity: 0.15;
}

#circle2 {
    width: 11%;
    top: 38%;
    left: 85%;
    opacity: 0.2;
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
}

#circle3 {
    width: 10%;
    top: 82%;
    left: 8%;
    opacity: 0.6;
}

.h1 {
    font-size: 2.6rem;
    color: #8a0030;
    text-align: center;
}

.bg-msg {
    background-color: rgb(240, 240, 240);
}

label {
    font-size: 1.1rem;;
    padding: 0 0.1rem;
}

.select {
    position: relative;
}

input, select, .custom-file-label {
    font-size: 1.1rem !important;
    border: none !important;
    border-bottom: #000a1e solid 2px !important;
    padding: 0 0.5rem !important;
    font-style: italic;
}

input:focus, select:focus {
    box-shadow: none !important;
    border-bottom: #f3bc75 solid 2px !important;
}

textarea {
    font-size: 1.1rem !important;
    border-color: rgba(0, 10, 30, 0.9) !important;
    font-style: italic;
}

textarea:focus, .btn:focus, .custom-file-label:focus, .custom-file-input:focus {
    box-shadow: none !important;
}

.form-group {
	margin-bottom: 1.5rem;
}

.form-control, select, .custom-file-label {
    border-radius: 0;
    color: #8a0030;
}

.invalid-feedback {
    font-size: 75% !important;
    font-style: italic;
}

.custom-file-label::after {
    content: "";
    background-image: url(../img/icone_loupe.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 65% 80%;
    width: 45px;
}

.form-control:focus-visible {
	text-shadow: none;
}

a, a:hover {
    text-decoration: none;
    color: inherit;
}

header nav a:focus {
    background-color: transparent !important;
}

.btn-jp {
    max-width: max-content;
    padding: 0.8vh 0.6em; 
    margin-top: 1em !important;
    border-radius: 5px;
    border: #8a0030 solid 1px;
    background-color: rgb(247, 204, 153); 
    color: #8a0030;
    font-size: 1.1rem;
    align-self: center;
}

.btn-jp:hover {
    background-color: #f3bc75;
    color: #8a0030;
}

#overlay
{
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.85);
	z-index: 10;
}

/* ********************** DEBUT HEADER ********************** */

header {
    margin-bottom: 4.8vh !important;
    position: relative;
}

.header_shadow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    padding-top: 4vh;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 0 -1px 4px 0 rgba(26,26,26,.08),0 4px 8px 0 rgba(26,26,26,.12);
}

.header_shadow h2 {
    color: transparent;
    font-family: 'Henny Penny', cursive; 
    font-weight: bold;
    font-size: 1.8rem;
    margin-bottom: 0.5vh;
}

header h2 a {
    font-family: 'Henny Penny', cursive; 
    font-size: 1.8rem; 
    white-space: nowrap;
    font-weight: bold; 
    text-align: center; 
    color: transparent; 
    background-color: #8a0030;
    background-image: linear-gradient(to top, #001c42, #371950, #67004a, #8a0030, #990000); 
    background-size: 100% 100%; 
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
}

.shake:hover {
    -webkit-animation-name: shake;
    animation-name: shake;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    }
    @-webkit-keyframes shake {
    0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    }
    15%, 45%, 75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-3px, 0, 0);
    }
    30%, 60%, 90% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(3px, 0, 0);
    }
    }
    @keyframes shake {
    0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    }
    15%, 45%, 75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-3px, 0, 0);
    }
    30%, 60%, 90% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(3px, 0, 0);
    }
}

header a {
    font-size: 1.1rem;
}

header a:last-child {
    padding-right: 0 !important;
}

header nav {
    z-index: 15;
    position: relative;
}

.nav_hover {
    height: 2px;
    width: 0;
    margin: 0 auto;
    background-color: #f3bc75;
    display: none;
}

header ul {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: max-content;
}

#pawn_icon, #account_icon, #logout_icon {
    width: 18px;
    height: 22px;
    margin: 0 0.15em;
}

header li {
    margin: 0 0.5em 0.8vh 0.5em;
}

header li:first-child, .dropdown-menu .dropdown-item:first-child, header li:first-child:hover, .dropdown-menu .dropdown-item:first-child:hover {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

header li:last-child, .dropdown-menu .dropdown-item:last-child, #navbarDropdown1, header li:last-child:hover, .dropdown-menu .dropdown-item:last-child:hover, #navbarDropdown1:hover {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

header li:hover, #navbarDropdown1:hover, .dropdown-item:hover {
    color: #8a0030;
}

.dropdown-toggle:hover:after {
    -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  }
  40%, 43% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -8px, 0);
  transform: translate3d(0, -8px, 0);
  }
  70% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -5px, 0);
  transform: translate3d(0, -5px, 0);
  }
  90% {
  -webkit-transform: translate3d(0,-4px,0);
  transform: translate3d(0,-4px,0);
  }
  }
  
  @keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  }
  40%, 43% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -8px, 0);
  transform: translate3d(0, -8px, 0);
  }
  70% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -5px, 0);
  transform: translate3d(0, -5px, 0);
  }
  90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0);
  }
}

.dropdown-menu {
    background-color: rgb(247, 204, 153);
    border-radius: 5px;
    padding: 0;
}

.dropdown-divider {
    margin: 0;
    border-top: 1px solid #f3bc75;
}

#navbarDropdown1, .dropdown-item {
    box-sizing: border-box;
    padding: 2vh 1.2rem !important;
}

#navbarDropdown1:hover, .dropdown-item:hover {
    background-color: #f3bc75;
}

.dropdown-item:active, .btn-outline-secondary:active {
    background-color: #f3bc75 !important;
    color: #8a0030 !important;
    border-color: rgb(138, 0, 48) !important;
}

nav button {
    border: none;
    background-color: transparent;
}

#burger {
    height: 32px;
    width: 35px;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.burger_line {
    height: 4px;
    width: 90%;
    margin: 0 auto;
    border-radius: 10px;
    background-color: rgb(0, 10, 30);
}

.cross_line {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    display: none;
}

.rotate1 {
    -webkit-animation-name: rotateOne;
    animation-name: rotateOne;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.rotate2 {
    -webkit-animation-name: rotateTwo;
    animation-name: rotateTwo;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes rotateOne {
0% {
transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100% {
transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
}
@keyframes rotateOne {
0% {
transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100% {
transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
} 

@-webkit-keyframes rotateTwo {
0% {
transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
}
@keyframes rotateTwo {
0% {
transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
} 

/* ********************** FIN HEADER ********************** */


/* ********************** DEBUT HOME ********************** */

.home {
    height: 100%;
    padding: 5vh 4em;
    background-image: url("../img/board-game-light.jpg"); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

.home div:first-child {
    margin-bottom: 2vh;
}

.home h1 {
    font-family: 'Henny Penny', cursive; 
    font-size: 3.6rem; 
    white-space: nowrap;
    font-weight: bold; 
    text-align: center; 
    color: transparent; 
    background-image: linear-gradient(to top, #001c42, #371950, #67004a, #8a0030, #990000); 
    background-size: 100% 100%; 
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    background-color: #8a0030;
}

.zoomInUp {
    -webkit-animation-name: zoomInUp;
    animation-name: zoomInUp;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    }
    @-webkit-keyframes zoomInUp {
    0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
    }
    @keyframes zoomInUp {
    0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
} 

.dices_icon {
    width: 14%;
}

.dices_icon img {
    width: 70%;
    min-width: 25px;
    max-width: 80px;
    height: auto;
    min-height: 25px;
    max-height: 80px;
    margin: 0 1em;
}

.home p {
    font-size: 1.2rem;
    margin-bottom: 2vh;
}

#yvelines {
    font-weight: bold;
}

/* ********************** FIN HOME ********************** */


/* ********************** DEBUT LOGIN ********************** */

.p_login {
    font-style: italic; 
    margin: 2em 3em;
}

.underline_a:hover {
    color : #8a0030;
}

.dice_pawns {
    position: absolute;
    right: 17%;
    bottom: 17%;
    width: 10%;
}

.dice_pawns img {
    width: 100%;
    min-width: 70px;
    max-width: 150px;
    height: auto;
    min-height: 50px;
    max-height: 100px;
}

@media screen and (max-width: 300px) {
    .dice_pawns {
        display: none;
    }
}

/* padding bouton insérer nouveau jeu */
.md-pl-15px {
    padding-left: 15px;
}
@media screen and (max-width: 767.98px) {
    .md-pl-15px {
        padding-left: 0;
    }
    .size-card:first-child
    {
        padding-top: 0 !important;
    }
}

/* ********************** CARDS CATALOGUE & DETAIL GAME ********************** */

.border-dark
{
    border-width:2px !important;
}

.card 
{
    margin: 0 5px !important;
}

.card-text
{
    font-size: 1.1rem;
}

.card-text span {
    text-decoration: underline;
}

.size-title
{
    font-size: 4.3rem;
}

.size-title-detail
{
    font-size: 3.5rem;
    color: #8a0030;
    text-align: center;
}

.btn-card
{
	margin-top: 0 !important;
    font-size: 1.1rem;
}

#photo, #photo-detail
{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 225px;
	overflow-x: hidden;
	border: solid transparent 10px;
    border-top-width: 15px;
}

#photo img, #photo-detail img
{
	height: 200px;
	width: auto;
}

/* ******** LISTE DES JEUX UTILISATEUR ******** */

.col_rwd {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.card-footer_rwd {
    width: 100%;
}
@media screen and (max-width: 767.98px) and (orientation: landscape) {
    .col_rwd {
        flex-direction: row;
        padding: 0 1em;
    }
    .card-footer_rwd {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .card_account_games {
        padding-left: 12%;
    }
    #photo_account_games {
        min-width: 190px;
    }
}

#photo_account_games
{
    display: flex;
    justify-content: center;
    padding-top: 15px;
}

#photo_account_games img
{
    height: 150px;
    width: auto;
}

.size-game-name
{
    font-size: 1.9rem;
    margin-bottom: 0.4em;
    color: #8a0030;
}

.finger_icon {
    width: 30px;
    height: 15px;
    margin: 0 0.4em;
    position: relative;
    top: 2px;
}

.btn-resize {
    max-width: max-content;
    padding: 0.8vh 0.6em; 
    margin-top: 1em !important;
    border-radius: 5px;
    border: #8a0030 solid 1px;
    background-color: #f7cc99; 
    color: #8a0030;
    font-size: .95rem;
}

.btn-resize:hover {
    background-color: #f3bc75;
    color: #8a0030;
    border-color: #8a0030 !important;
}

#delete {
    display: inline-block;
    background-image: url(../img/delete.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 45%;
    padding: 0 1.4em !important;
}

.delete-backoffice {
    background-image: url(../img/delete.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
    padding: 0.8vh 1.4em;
}

.edit-backoffice {
    background-image: url(../img/edit.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 36%;
    padding: 0.8vh 1.4em;
}

.backoffice {
    width: 80%;
    margin: 0 auto;
}

.backoffice .card-body {
    padding-left: 10% !important;
}

.backoffice h4 {
    font-size: 1.6rem;
    margin-bottom: 0.4em;
    color: #8a0030;
}

.backoffice p, .backoffice ul {
    width: max-content;
    margin: 0 auto;
}

.overflow_table {
    overflow-x: auto;
}

.up {
    height: 35px;
    width: 35px;
    background-image: url(../img/up.jpg);
    background-position: contain;
    background-repeat: no-repeat;
    background-size: 100%;
    border-radius: 5px;
    position: fixed;
    bottom: 5%;
    right: 2%;
    z-index: 999;
    opacity: 0.85;
}

.up:hover {
    opacity: 1;
}

.error {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.error span {
    text-decoration: underline;
}

.error p {
    font-size: 1.3rem;
    text-align: center;
    font-style: italic;
}

.error img {
    width: 450px;
    height: auto;
    margin: 1em;
}

/*********************** MESSAGERIE ********************** */

.bg-beige
{
    background-color: rgba(247, 205, 153, 0.7);
    border-radius: 5px;
}

.bg-gris
{
    background-color: rgb(240, 240, 240);
    border-radius: 5px;
}

/* .test-inset 
{
    border: inset rgb(235, 232, 232) 5px;

}  */


/*.cadre-carte
{
    background-image: url("../img/cadre_carte.png"); 
    background-size: 90% 200%;
    background-position: center;
    background-position:top;
    background-repeat: no-repeat;
    
} */


.ombre
{
    box-shadow: 3px 2px 12px rgba(151, 151, 151, 0.705);
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}

textarea {
    border-radius: .25rem !important;
}

/* ********************** DEBUT FOOTER ********************** */

footer {
    margin-top: 3vh;
    font-size: 0.95rem !important;
}

footer p:first-child, footer div:first-child, footer span, .footer, #contact {
    color: rgb(100, 100, 100);
}

#contact:hover {
    text-decoration: underline;
}

footer p:first-child {
    font-style: italic;
}

footer .separate {
    margin: 0 1em;
}

/* ********************** MODAL MENTIONS LEGALES ********************** */

#modal_ML {
    cursor: pointer;
}

#modal_ML:hover {
    text-decoration: underline;
}

.modal-dialog {
    width: initial !important;
}

.modal-header
{
    padding: 0.5rem;
}

.modal-header h2
{
    font-size: 1.6rem;
    font-weight: bold;
    color: #8a0030;
    margin: 0 auto;
}

.modal-header .btn-close
{
    opacity: 0.9;
    margin: 0;
}

.btn-close {
    color: #000a1e !important;
}

.btn-close:focus {
    box-shadow: none;
}

.modal-body h2
{
    font-size: 1.2rem;
	margin: 1rem;
    font-weight: bold;
    color: rgb(0, 10, 30);
}

.modal-body h3
{
    font-size: 1rem;
	margin: 1rem;
    padding-left: 1rem;
    font-weight: bold;
    color: rgb(0, 10, 30);
}

.modal-body p
{
    font-size: 0.95rem;
    margin: 1rem;
    color: rgb(0, 10, 30);
}

.modal-body a
{
    text-decoration: none;
    color: #8a0030;
}

.modal-body a:hover
{
    color: #8a0030;
    text-decoration: underline;
    text-decoration-color: #f3bc75;
}

.modal-body ul
{
    margin: 0 2rem;
}

.modal strong
{
    font-weight: bold;
}

@media screen and (max-width: 575.98px)	
{
    .modal-body
    {
        padding: 0;
    }
}

/* ********************** FIN FOOTER ********************** */


/* ********************** DEBUT RESPONSIVE ********************** */

@media screen and (max-width: 991.98px) and (orientation: landscape) {  /* < 992 PAYSAGE */
    .container-fluid {
        width: 90%; 
        margin: 0 auto;
        padding: 2.5vh 2em; 
    }
    .h1 {
        font-size: 2.1rem !important;
    }
    header {
        margin-bottom: 5vh !important;
    }
    .header_shadow {
        padding-top: 2.5vh;
    }
    .header_shadow h2 {
        font-size: 1.2rem;
        margin-bottom: 2.2vh;
    }
    header h2 a {
        font-size: 1.4rem !important;
    }
    header a, .home p, .btn-jp, label, input, select, .custom-file-label, .card-text {
        font-size: 1.1rem !important;
    }
    #pawn_icon, #account_icon, #logout_icon {
        width: 14px;
        height: 17px;
        margin: 0 0.5em;
    }
    header ul {
        position: absolute;
        right: 0;
        top: 10vh;
        flex-direction: column;
        align-items: flex-start;
        background-color: #f7cc99;
        border-radius: 5px;
        display: none;
    }
    header li {
        width: 100%;
        margin: 0;
        padding: 2vh 1.2rem;
    }
    header li:hover {
        background-color: #f3bc75;
        border-radius: 5px;
    }
    #burger {
        height: 30px;
        width: 30px;
    }
    /* ********************** FIN HEADER ********************** */
    
    /* ********************** DEBUT HOME ********************** */
    .home {
        padding: 3vh 2em;
    }
    .home h1 {
        font-size: 2.2rem;
    }
    .dices_icon {
        width: 10%;
    }
    .dices_icon img {
        margin: 0 0.6em;
    }
    /* ********************** FIN HOME ********************** */
    
    .p_login {
        font-size: 1rem;
        margin: 1.5em;
    }
    #photo_account_games img
    {
        height: 140px;
        width: auto;
    }
    .backoffice {
        width: 100%;
    }
    .error img {
        width: 350px;
    }
   
    /* ********************** DEBUT FOOTER ********************** */
    footer {
        font-size: 0.9rem !important;
        margin-top: 8vh;
        flex-wrap: wrap;
    }
    footer p:first-child, footer div:first-child, .footer {
        width: 100%;
        text-align: center;
    }
    footer div:first-child {
        display: flex;
        justify-content: center;
    }
    footer p {
        margin-bottom: 0.5vh;
    }
}

@media screen and (max-width: 991.98px) and (orientation: portrait) {   /* < 992 PORTRAIT */
    .container-fluid {
        width: 90%;
        margin: 0 auto;
        padding: 2vh; 
    }
    .h1 {
        font-size: 2.7rem;
    }
    header {
        margin-bottom: 4vh !important;
    }
    .header_shadow {
        padding-top: 2vh;
    }
    .header_shadow h2 {
        font-size: 1.8rem;
        margin-bottom: 1.5vh;
    }
    header h2 a, .size-game-name, .backoffice h4 {
        font-size: 1.8rem !important;
    }
    header a, .home p, .btn-jp, label, input, select, .custom-file-label, .card-text {
        font-size: 1.3rem !important;
    }
    #pawn_icon, #account_icon, #logout_icon {
        margin: 0 0.5em;
    }
    header ul {
        position: absolute;
        right: 0;
        top: 4.5vh;
        flex-direction: column;
        align-items: flex-start;
        background-color: #f7cc99;
        border-radius: 5px;
        display: none;
    }
    header li {
        width: 100%;
        margin: 0;
        padding: 1.5vh 1.5rem;
    }
    header li:hover {
        background-color: #f3bc75;
        border-radius: 5px;
    }
    /* ********************** FIN HEADER ********************** */
    
    /* ********************** DEBUT HOME ********************** */
    .home {
        padding: 3vh 2em;
    }
    .home h1 {
        font-size: 2.8rem;
    }
    .dices_icon img {
        margin: 0 0.6em;
    }
    .home p {
        margin-bottom: 2.5vh;
    }
    /* ********************** FIN HOME ********************** */

    .p_login {
        font-size: 1rem;
        margin: 1em;
    }
    .dice_pawns {
        width: 14%;
        bottom: 5%;
    }

    /* ********************** SIZE CATALOG TITLE & TITLE DETAIL ********************** */

    .size-title
    {
        font-size: 3.5rem;
    }
    .btn-resize {
        font-size: 1rem;
    }
    .backoffice {
        width: 100%;
    }
   
    /* ********************** DEBUT FOOTER ********************** */
    footer {
        margin-top: 2.5vh;
        font-size: 1rem !important;
		flex-wrap: wrap;
    }
    footer p:first-child, footer div:first-child, .footer {
        width: 100%;
        text-align: center;
    }
    footer p {
        margin-bottom: 0.5vh;
    }
}

@media screen and (max-width: 575.98px) and (orientation: portrait) {   /* < 576 PORTRAIT */
    .container-fluid {
        width: 95%;
        padding: 1.5vh;
    }
    .circle {
        display: none;
        z-index: -5;
    }
    .h1 {
        font-size: 2rem;
    }
    header {
        margin-bottom: 3vh !important;
    }
    .header_shadow {
        padding-top: 1.5vh;
    }
    .header_shadow h2 {
        font-size: 1.4rem;
        margin-bottom: 0.5vh;
    }
    header h2 a {
        font-size: 1.3rem !important;
    }
    header a, .home p, .btn-jp, label, input, select, .custom-file-label, .card-text, .btn-resize {
        font-size: 1.05rem !important;
    }
    #pawn_icon, #account_icon, #logout_icon {
        width: 14px;
        height: 17px;
    }
    header li {
        padding: 1.5vh 1rem;
    }
    #burger {
        height: 25px;
        width: 25px;
    }
    .burger_line {
        height: 3px;
    }
    /* ********************** FIN HEADER ********************** */
    
    /* ********************** DEBUT HOME ********************** */
    .home {
        padding: 3vh 1em;
    }
    .home h1 {
        font-size: 1.6rem;
    }
    .dices_icon {
        width: 15%;
    }
    footer div:first-child, footer p:first-child, .footer {
        font-size: 0.72rem;
    }
    .p_login {
        font-size: 0.8rem;
        margin: 1.2em;
    }
    .p_profil {
        font-size: 0.9rem;
        margin: 1.5em;
    }
    .dice_pawns {
        width: 10%;
        bottom: 0;
    }
    .dice_pawns img {
        min-width: 55px;
        min-height: 40px;
    }
    .finger_icon {
        width: 25px;
        height: 13px;
    }

    /* ********************** SIZE CATALOG/DETAIL TITLE & SIZE DETAIL TITLE GAME ********************** */

    .size-title, .size-title-detail
    {
        font-size: 2.5rem;
    }

    /* ********************** SIZE CARD CATALOG ********************** */

    .card-deck, .size-card {
        width: 100% !important;
    }
  
    .size-game-name, .backoffice h4
    {
        font-size: 1.8rem !important;
    }
    
    .up {
    height: 30px;
    width: 30px;
    }
    
    .error {
        margin-bottom: 0.5em;
    }

    .error img {
        width: 300px;
    }
}