@import "font-awesome.min.css";
@font-face {font-family: 'cthulhu'; src: url('font/cthulhu.woff2') format('woff2'), url('font/cthulhu.woff') format('woff');}
@font-face{font-family : "Kirvy";   src: url('font/Kirvy.eot?#iefix') format('embedded-opentype'), url('font/Kirvy.otf') format('truetype')}

/* CSS Document */
* {margin:0; padding:0;outline:none;}
HTML { height: 100%; font-size: 62.5%;}
BODY { min-height: 100%; background:#ecf0f1; height: 100%; font-size: 62.5%; font-family: "Kirvy"; color: #555; position: relative; overflow-x:hidden;}
.clear {clear:both; display:block;}
.clear_tel {clear:none;}
.error {border:1px solid red;}

A { color: #1D8EC7; text-decoration: none; }
A:hover { color: #E03D22; }
A:hover, A:active, A:focus { outline: 0; }
LI {list-style:none;}

/* CSS Document */

HEADER {height:4rem;width:100%; color:white;background:#030 url('../IMAGES/header.jpg') right;border-bottom:1px solid #03ab0c; font-size:1.6rem; padding-left:2%;/*margin-bottom:2rem;*/position:relative;}
HEADER A {color:white;}
HEADER .icon {font-size:3rem; float:left; margin-top:0.5rem; margin-right:0.2rem;}
HEADER H1 {font-size:1.6rem; margin-top:0.8rem; float:left; margin-left:2rem; font-family:"cthulhu"; font-weight:normal;}

HEADER > INPUT {height:2.8rem; width:auto; min-width:22%; margin-left:20%; margin-top:0.4rem; padding-left:0.5rem;}
#btnrech,#btnrechpage,#rechtel,#rechtelbtn {display:none;}

HEADER #compte {height:100%; float:right; margin-right:3%;}
HEADER #compte A {position:relative; font-size:2rem; display:block; color:white; border:0.3rem solid white; border-radius:50%;width:3rem;height:3rem; margin-top:0.2rem; text-align:center;}
HEADER #compte A I {margin-top:0.5rem;}
HEADER #compte A:hover I {color:#F30; transition-duration: 0.5s}

HEADER #con {position:absolute; z-index:10; display:none; right:0; top:4rem;width:25rem; padding:2rem; background:#360}
HEADER #con LI A {color:white;}
HEADER #con LI A:hover {color:#F30; transition-duration: 0.5s}
HEADER #con LI INPUT {width:80%; height:3rem; font-size:1.3rem;}
HEADER #con LI INPUT[type='button'] {font-size:1.5rem; border:1px solid white; background:url('../IMAGES/header.jpg') center; color:white; font-weight:bold; cursor:pointer;}
HEADER #con LI INPUT[type='submit'] {font-size:1.5rem; border:1px solid white; background:url('../IMAGES/header.jpg') center; color:white; font-weight:bold; cursor:pointer;}

#menu_haut {position:relative; margin-left:15%;}
#menu_haut LI {list-style:none; float:left; margin-left:2rem; line-height:4rem;}
#menu_haut LI A {font-family:"cthulhu"; display:inline-block; position:relative; color:white; height:4rem; text-align:center;}
#menu_haut LI A:hover {color:#F30; transition-duration: 0.5s}

/* page accueil */
H2 {font-size:10rem; margin-top:0.8rem; float:left; font-family:"cthulhu"; width:100%; text-align:center; display:inline-block;}
H3.st {font-size:4rem; float:left; font-family:"cthulhu"; width:100%; text-align:center; display:block; margin:auto; margin-top:0.8rem;}

/* liste carte: liste des extensions */
#menu {position:relative;margin-top:15%; clear:both;}
#menu LI {list-style:none;}
#menu LI A {width:15%; height:15%; border:5px solid #ecf0f1; font-family:"cthulhu"; background:white; display:inline-block; float:left; margin-left:5%; position:relative;}
#menu LI A::after {content: '';display: block;padding-bottom: 100%;}
#menu LI A IMG {position:absolute; width:80%; margin-left:10%;}
#menu LI A I {position:absolute; width:100%; text-align:center; color:black; font-size:25rem; display:block;}
#menu LI A SPAN {position:absolute; bottom:0; width:100%; text-align:center; font-size:5rem; display:block;}

#menu LI:first-child A {color: #2b80c5; border-color:#2b80c5; box-shadow: 0 0 0 5px #ecf0f1, 0 0 0 10px #2b80c5;}
#menu LI:nth-child(2) A {color: #cc3038; border-color:#cc3038; box-shadow: 0 0 0 5px #ecf0f1, 0 0 0 10px #cc3038;}
#menu LI:nth-child(3) A {color: #107116; border-color:#107116; box-shadow: 0 0 0 5px #ecf0f1, 0 0 0 10px #107116;}
#menu LI:nth-child(4) A {color: #f2c532; border-color:#f2c532; box-shadow: 0 0 0 5px #ecf0f1, 0 0 0 10px #f2c532;}
#menu LI A:hover {transition-duration: 0.5s; background:#FFC;}

#extensions {width:20%; background:white; min-height:90%; font-size:2rem; margin-left:0.5%; padding:1rem; float:left;}
#extensions LI O {cursor:pointer;}
#extensions OL {margin-left:10%;display:none;}
#extensions OL LI {height:3rem; border:2px solid black; background:#f2f2f2; border-radius:10rem; position:relative; font-size:1.5rem; text-align:center; margin-bottom:1%; line-height:3rem;}
#extensions OL A {color:black !important;}
#extensions OL LI IMG {height:3rem; border:2px solid black; border-radius:50%; width:3rem; display:block;position:absolute;top:-2px;left:-2px;}
#ext_tel {display:none;}


#cartes {width:76%; float:left; background:white; min-height:90%; font-size:2rem; margin-left:0.5%; padding:1rem; }
#cartes FONT {float:right; font-size:2rem; margin-bottom:2rem;}
.cherche {width:90% !important; margin-left:5% !important; min-height:93% !important;}
.cherche INPUT[type='text'] {height:2.8rem; width:auto; min-width:30%; margin-left:0%; margin-top:0.4rem; padding-left:0.5rem;}
.cherche LABEL {margin-top:2rem; display:inline-block; width:100%; background: #ECFEFF;border-top: 1px solid #F90;border-bottom: 1px solid #F90; padding: 0.5rem; margin-bottom:1rem;}


.tableau {width:100%;}
.tableau TR TH {background:white; padding: 0.5rem;vertical-align: bottom;border-bottom: 2px solid #ddd;line-height: 1.42857; font-weight:bold; font-size:1.5rem;}
.tableau TBODY TR:nth-of-type(2n+1) {background-color: #f9f9f9;}
.tableau TR TD {padding: 0.5rem;vertical-align: bottom;line-height: 1.42857;border-bottom:1px solid #ddd;position:relative; font-size:1.5rem;}
.tableau TR TD A {color:red;}
.tableau TR TD A:hover {color: #e74c3c;text-decoration: underline;}
.tableau TR TD IMG.ext {position:absolute; right:0px;top:0px;}

.fac1 {color: #2b80c5 !important;}
.fac2 {color: #ec8426 !important;}
.fac3 {color: #107116 !important;}
.fac4 {color: #93C    !important;}
.fac5 {color: #cc3038 !important;}
.fac6 {color: #606060 !important;}
.fac7 {color: #04D5D8 !important;}
.fac8 {color: #32476c !important;}
.fac0 {color: #cbce7b !important;}

.btn {
	position:relative;
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    border-radius: 1px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.btn-success {color: #fff; background-color: #2ecc71; border-color: #29b765;}
.btn-warning {color: #fff; background-color: #e67e22; border-color: #d67118;}
.btn-block { display: block; width: 100%;}
.btn-primary { color: #fff; background-color: #2980b9; border-color: #2472a4;}
.btn-danger { color: #fff;  background-color: #e74c3c;  border-color: #e43725;}
.btn-jaunne {background:#FCEF62;}

#carte { width: 80%; margin: auto; position: relative; background: white; min-height:90%; padding: 1rem; margin-top:1%;}
#carte > DIV {float:left;width:55%;margin-top:30px; border:1px solid black;}

#carte #c_av {min-width:20%; height:3rem; font-size:2rem; border:1px solid black; float:left; background:#f5f2ff; padding:1rem;}
#carte #c_ap {min-width:20%; height:3rem; font-size:2rem; border:1px solid black; float:right; background:#f5f2ff; padding:1rem; text-align:right;}
#carte #c_pack {min-width:20%; height:3rem; font-size:2rem; border:1px solid black; float:left; background:#f5f2ff; padding:1rem; text-align:center; margin-left:17%;}
#carte #c_pack_tel {display:none;}
#carte #btn_carte {min-width:20%; font-size:2rem; border:1px solid black; float:left; background:#f5f2ff; padding:1rem; text-align:center; margin-left:17%;cursor:pointer;}
#carte #btn_carte:hover {transition-duration: 1.5s; background:#FFC;}

#carte TITRE {font-size:2rem; padding:0.5rem; min-height:3.2rem; display:block;} 
#carte TITRE IMG {border:1px solid black; border-radius:50%; background:white;float:left;} 
#carte TITRE H3 {float:left; margin-left:1rem;} 
#carte TITRE H3.simple {font-size:2rem; line-height:3rem;} 
#carte TITRE H3.simple {font-size:2rem; line-height:3rem;} 
#carte TITRE H3.simple.long {font-size:2rem;} 
#carte TITRE H3.simple.tlong {font-size:1.5rem; line-height:3rem;} 
#carte TITRE H3.simple.ttlong {font-size:1.3rem; line-height:3rem;} 
#carte TITRE SPAN {border-top: solid rgba(255, 255, 255, 0.1) 1px; margin-top:1rem; font-size:1.2rem; display:block;width:100%; padding-left:6rem; padding-top:0.5rem;}
#carte TITRE #cout {width:3rem;height:3rem;border:1px solid black;box-shadow: 0 0 0 3px #ecf0f1, 0 0 0 5px black; background:#453C5B; float:right; position:relative; color:white; right:0.5rem; text-align:center; display:block; border-radius:50%;}

#carte #details {font-size:1.5rem; padding:1rem; position:relative;}
#carte #details .card-traits {float:right; color:grey;}
#carte #details BLOC {border-left: 2px solid; padding-left:1rem; margin-top:1rem; display:inline-block; padding:0.5rem;}
#carte #details BLOC P {padding:0.5rem;}
#carte #details .card-illustrator {font-size:1rem; margin-bottom:1rem; margin-top:1rem;}
#carte > IMG {float:left; margin-left:20px;margin-top:30px;cursor:pointer; width:15vw; height:21vw;}
#carte #details #carac {margin-top:1rem;}
#carte #details #carac .ico {background-size:100% !important; width:1.5rem;height:1.5rem;display:inline-block;}
#carte #details #bonus SPAN {border:1px solid black; border-radius:50%; background:white; padding:0.5rem;}
#carte #details .card-pack {float:left; }
#carte .icotype {float:right; margin-right:0.5vw;}
#carte .simple { margin-right:1.5vw !important;}

#carte H4 {float:none; font-size:2rem; margin-left:1rem; width:calc(100% - 1rem); border-bottom:1px solid grey; margin-top:1rem; margin-bottom:1rem;} 


.review {width:100%;}


/*################# GESTION DECK ###############*/
.deck {float:left; margin-left:3%; width:30%; min-height:15rem; border : solid white 1px; border-radius:10% 0 0 10%; position:relative;}
.deck DIV:first-child {width:10rem; float:left;position: relative;min-height: 1px;padding-left: 15px;padding-right: 15px;}
.deck-image {
    width: 10rem;
    height: 10rem;
    border: 1px solid black;
	box-shadow: 0 0 0 3px #ecf0f1, 0 0 0 0.5rem black;
	background: #453C5B;
	position: relative;
	color: white;
	float:left;
    text-align: center;
    display: block;
	left:-5.5rem; top:0.5rem;
    border-radius: 50%;
    background-size: 30rem 20rem;
    background-position: -2.3rem -3.2rem;
    background-repeat: no-repeat;	
	}
.deck-image-pur {left:0;margin-right:1.8rem; margin-bottom:2rem;}
.deck DIV:nth-child(2) {width:calc(92% - 10rem); float:left;position: relative;min-height : 10.9rem; padding-left : 0.2em;}
.deck LI {font-size:1.5rem;}

#divexporte {margin-bottom:10px;border:1px solid black;min-height:200px;display:none;font-size:9px;}
#divexportetype {margin-bottom:10px;display:none;}
#divextensions,#divdescription,#divversions {margin-bottom:1rem; position:relative; overflow:hidden; padding:0.5rem;height:2rem; font-size:1.3rem; border:1px solid black; width:calc(100% - 1rem); background:#F8F8F8;}
#divextensions A,#divdescription A,#divversions A.fleche {width:3rem; height:2.8rem; background: url(../IMAGES/sort_desc.png) no-repeat right; right:0;top:0; position:absolute;}
#divextensions INPUT {display:inline;float:left;margin:0; height:20px; margin-top:5px;}
#divextensions P {margin:0;float:left;}
#divextensions P.labext {margin-left:10px; margin-top:5px; height:auto}
#divdescription INPUT,#divdescription TEXTAREA {width:99%;}
#divversions HR {margin-top:1rem; margin-bottom:1rem;}
#divversions INPUT[type='text'] {height:2.8rem; width:4rem; min-width:auto; margin-left:0%; margin-top:0.4rem; padding-left:0.5rem;}
#btnDeleteDeck {width:15%;right:1rem;position:absolute;bottom:0;}
#btnVoirDeck {width:15%; right:1rem;top:1rem; position:absolute;}
#btnVoirDeckTel {display:none;}
#h3description,#spandescription {display:none;}

.btn-group {display: table; width: 100%; table-layout: fixed; border-collapse: separate; position: relative;}
.btn-group .btn { float: none; display: table-cell;width: 1%; position: relative; color: #333;background-color:#fff;border-color: #ccc;}
.btn:hover, .btn.active { color: #333; background-color:#e6e6e6;border-color: #adadad;}
.btn input[type="radio"], .btn-group > .btn input[type="radio"], .btn input[type="checkbox"], .btn-group > .btn input[type="checkbox"] { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none;}
.btn-xs {width:0.3rem !important;padding:0 !important;}

.deckzone {width:41% !important;margin-left:2% !important}
.deckzone #liste_cartes_deck {width:100%;}
.deckzone #liste_cartes_deck TH { vertical-align: bottom; background: white; font-size: 0.8vw; font-weight: bold; text-align: left; border-bottom: 2px solid  #ddd;line-height: 1.42857; padding: 0.5rem;user-select: none;}
.deckzone #liste_cartes_deck TBODY TR:nth-of-type(2n+1) {background-color: #f9f9f9;}
.deckzone #liste_cartes_deck TD { font-size: 0.8vw; position:relative;}

.deckconstruct {width:51% !important;margin-left:2% !important;}
.optiondeck {background:#F3ECE6; border:1px solid #000000;border-radius:0.5vw; font-size:0.6vw; display:inline-block; margin-right:0.3vw; padding-left:0.2vw; padding-right:0.2vw;}
.text-danger{color:#a94442}
#deck_cartes {font-size:1.4rem;}
#deck_cartes .slot-header{color:rgba(100, 100, 100, 0.7);border-bottom:solid 1px rgba(100, 100, 100, 0.1); font-size:1.1rem;}
#deck_cartes SECTION {float:left;width:33%;}
#deck_cartes SECTION H5 {font-size:1.6rem;margin-bottom:1rem;}
#deck_cartes SECTION > DIV {margin-bottom:0.5rem;}
#deck_cartes SECTION .btn-group {width:6rem;float:left;}
#deck_cartes SECTION .titre {float:left;margin-left:1rem;}

#deckcontent #imgcarte {margin-bottom:1rem;float:left;width:40%;}
#deckcontent #infos {margin-bottom:1rem;float:left;margin-left:1rem;width:calc(60% - 1rem);font-size:1.4rem;}
#deckcontent #infos H4 {font-weight:bold;width:100%;}

.activevert {color: #333 !important; background-color:#0C3 !important;  border-color: #adadad !important;}
.activered {color: #333 !important; background-color:#F30 !important;  border-color: #adadad !important;}



#tablecomment {width: 100%; max-width: 100%; margin-bottom: 20px;}
#tablecomment TH {vertical-align: bottom; text-align:left; border-bottom: 2px solid #ddd; padding: 8px; font-size: 0.8vw;line-height: 1.42857;}
#tablecomment TD {padding: 8px; background-color: #f9f9f9; line-height: 1.42857; vertical-align: top; border-top: 1px solid #ddd; font-size: 0.8vw;}



/*################# DECK LIST ###############*/
.deck_liste {width:90% !important;margin-left:5% !important;}
.deck_liste > DIV:nth-of-type(1) {width:30%;float:left;}
.deck_liste > DIV:nth-of-type(2) {width:65%;float:left; margin-left:5%;}

.text-center { text-align: center;}
.pagination { display: inline-block; padding-left: 0; margin: 20px 0; margin-top: 20px; border-radius: 1px;}
.pagination > li { display: inline;}
.pagination > li > a, .pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    line-height: 1.42857;
    text-decoration: none;
    color: #2980b9;
    background-color: #fff;
    border: 1px solid 
    #ddd;
        border-top-color: rgb(221, 221, 221);
        border-right-color: rgb(221, 221, 221);
        border-bottom-color: rgb(221, 221, 221);
        border-left-color: rgb(221, 221, 221);
    margin-left: -1px;
}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { z-index: 3;color: #fff;background-color:#2980b9;border-color: #2980b9; cursor: default;}
.decklist-faction-image img {  height: 64px;}
.tabledeck { width: 100%; max-width: 100%; margin-bottom: 20px;}
.tabledeck TR:nth-of-type(2n+1) { background-color:  #f9f9f9;}
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {color: #fff;background-color: #2980b9;}
.nav-pills > li > a { border-radius: 1px;}
.nav > li > a { position: relative;display: block; padding: 10px 15px;}
.deck_liste DIV:nth-of-type(1) INPUT, SELECT { margin-top: 10px; height: 34px; padding: 6px 12px;font-size: 14px; line-height: 1.42857; color: #555; background-color: #fff;background-image: none;border: 1px solid #ddd; border-radius: 1px;}


/*################# RESSOURES ###############*/

/* liste carte: liste des extensions */
#menu_res {position:relative;margin-top:1%; clear:both;}
#menu_res LI {list-style:none;}
#menu_res LI A {width:20%; height:20%; border:5px solid #ecf0f1; font-family:"cthulhu"; background:white; display:inline-block; float:left; margin-left:3.5%; margin-bottom:3.5%; position:relative;}
#menu_res LI A::after {content: '';display: block;padding-bottom: 100%;}
#menu_res LI A IMG {position:absolute; width:80%; margin-left:10%;}
#menu_res LI A I {position:absolute; width:100%; text-align:center; color:black; font-size:25rem; display:block; color:red;}
#menu_res LI A SPAN {position:absolute; bottom:0; width:100%; text-align:center; font-size:2.8rem; display:block;}

#menu_res LI.bleu A {color: #2b80c5; border-color:#2b80c5; box-shadow: 0 0 0 5px #ecf0f1, 0 0 0 10px #2b80c5;}
#menu_res LI.rouge A {color: #cc3038; border-color:#cc3038; box-shadow: 0 0 0 5px #ecf0f1, 0 0 0 10px #cc3038;}
#menu_res LI.vert A {color: #107116; border-color:#107116; box-shadow: 0 0 0 5px #ecf0f1, 0 0 0 10px #107116;}
#menu_res LI.orange A {color: #f2c532; border-color:#f2c532; box-shadow: 0 0 0 5px #ecf0f1, 0 0 0 10px #f2c532;}
#menu_res LI A:hover {transition-duration: 0.5s; background:#FFC;}



/*################# STATS ###############*/

.stats {width:100%;}
.stats TR TH { background: white;padding: 5px;vertical-align: bottom;border-bottom: 2px solid #ddd;line-height: 1.42857; font-weight: bold;}
.stats TBODY TR:nth-of-type(2n+1) { background-color:  #f9f9f9;}
.stats TR TD { padding: 5px; vertical-align: bottom; line-height: 1.42857;border-bottom: 1px solid  #ddd; position: relative;}
.hexa {width: 40px; height: 45px; position: absolute;  background: url(../IMAGES/hexagone.png); background-color: rgba(0, 0, 0, 0); right: 2px; top: 2px; font-size: 24px;}
.hexa I {text-align: center; width: 100%; height: 100%; line-height: 45px;}



/*################# GENERATEUR DE CARTE ###############*/
@font-face {font-family: 'bolton'; src: url('font/bolton.ttf') format('ttf'), url('font/cthulhu.woff') format('woff');}

.generateur_carte_c {float:left; width:calc(40% - 1.5rem); height:100%; margin-left:0%;margin-top:0; text-align:center; background:black url(../IMAGES/GENERATEUR/illus_fond.jpg) no-repeat; background-size:100%;}
.generateur_carte_ci {background:black url(../IMAGES/GENERATEUR/illus_fond_incline.jpg) no-repeat; background-size:129%;}
.generateur_carte_c IMG {width:70%; margin-top:14.5%;}
.generateur_carte_c .btn {border : 2px solid #937B28; background:black; color:white; font-size:1.5rem; border-radius:10px;}

.gen_titre {width:100%;height:4rem;background:#EBEBEB;border-bottom:1px solid #E1E1E2;border-top:1px solid #E1E1E2;}
.gen_titre LI {min-width:4rem;font-size:1vw; text-align:center;border-left:1px solid #b7b7b7; line-height:4rem; cursor:pointer;float:left;}
.gen_titre LI:hover {background:#E1E1E2;}
.gen_titre LI:nth-of-type(1) {border:0;}

.generateur_carte {background:white; width:calc(60% - 2rem); padding:1rem; position:relative; border-left:1px solid black; border-right:1px solid black; float:left; margin-left:1rem; min-height:calc(100% - 2rem);}
.generateur_carte H1 {font-size:3rem;}
.generateur_carte FONT {font-size:2rem;}
.generateur_carte P {font-size:1.5rem; display:inline-block;}
.generateur_carte LABEL {font-size:2rem; min-width:camc(15% - 1rem); height:2vw; display:inline-block; padding-left:1em; padding-right:1em;}
.generateur_carte SELECT {font-size:1.5rem; min-width:15%; padding:0.2vw;}
.generateur_carte INPUT {height:1vw;}
.generateur_carte INPUT[type='radio'] {margin-left:0.5vw;margin-right:0.5vw;}

.generateur_image {width:6.2vw; height:6.1vw; position:absolute; right:1vw; top:8vw; text-align:center; display:none;}
.generateur_image BUTTON {background:white; border:1px solid black; padding:0.5vw; font-size:2rem; position:absolute;}
.generateur_image INPUT {top:10rem; right:3rem; width:4rem; height:4rem; border:0; text-align:center; line-height:4rem; font-size:1vw; position:absolute;}


.gen_txt_rich {width:100%;height:4rem;background:#EBEBEB;border-bottom:1px solid #E1E1E2;border-top:1px solid #E1E1E2;}
.gen_txt_rich LI {width:4rem;font-size:1vw; text-align:center;border-right:1px solid #b7b7b7; line-height:4rem; cursor:pointer;float:left;}
.gen_txt_rich LI:hover {background:#E1E1E2;}
#txt_rich_val {margin-top:4px; width:calc(100% - 3px); height:20rem;padding:2px;}

#txt_rich_div {width:calc(100% - 3px); min-height:20rem; border:1px solid black;font-size:1.3rem;padding:2px; font-family:verdana;}




.creation {width:90% !important; margin-left:5% !important; min-height:93% !important;}
.creation INPUT[type='text'] {height:2.8rem; width:auto; min-width:30%; margin-left:0%; margin-top:0.4rem; padding-left:0.5rem;}
.creation LABEL {margin-top:2rem; display:inline-block; width:100%; background: #ECFEFF;border-top: 1px solid #F90;border-bottom: 1px solid #F90; padding: 0.5rem; margin-bottom:1rem;}
.creation UL {width:90%;margin-left:5%;}
.creation LI {width:189px; float:left;margin-left:1%;margin-bottom:1%; text-align:center;}
.creation LI IMG {width:100%;}
.creation INPUT[type='submit'] {padding:0.9rem; background:white; border:1px solid black;}























FOOTER {position:absolute; bottom:0%; width:100%; min-height:3rem; background-color: #95a5a6; text-align:center; font-size:1rem;}


/*################# APERCU IMAGES ###############*/

/* The Modal (background) */
.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 30; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */  background-color: rgba(0,0,0,0.7); /* Black w/ opacity */}
/* Modal Content (Image) */
.modal-content { margin: auto; display: block; /*width: 80%;*/ max-height:80%; max-width:80%; /*max-width: 700px;*/}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption { margin: auto;display: block; width: 80%; max-width: 700px;text-align: center; color: #ccc; padding: 10px 0; height: 150px;}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption { animation-name: zoom; animation-duration: 0.6s;}
@keyframes zoom { from {transform:scale(0)} to {transform:scale(1)}}
/* The Close Button */
.closem {position: absolute; top: 15px;right: 35px; color: white;font-size: 40px; font-weight: bold; transition: 0.3s;}
.closem:hover,.close:focus { color: #bbb; text-decoration: none; cursor: pointer;}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){ .modal-content { width: 100%;}}

/*################# POPUP CARTES ###############*/

div.ui-tooltip {max-width:inherit !important;max-height:inherit !important;height:auto !important; padding-bottom:2rem !important;}