/*
[TT]				f    o    n    t    s  
*/

@font-face {
font-family: 'Helvetica Rounded LT Std Bold';
font-style: normal;
font-weight: normal;
src: local('fonts/Helvetica Rounded LT Std Bold'), url('fonts/HelveticaRoundedLTStd-Bd.woff') format('woff');
}

@font-face {
font-family: 'Helvetica Rounded LT Std Bold Condensed';
font-style: normal;
font-weight: normal;
src: local('fonts/Helvetica Rounded LT Std Bold Condensed'), url('fonts/HelveticaRoundedLTStd-BdCn.woff') format('woff');
}

@font-face {
font-family: 'Helvetica Neue LT Std 45 Light';
font-style: normal;
font-weight: normal;
src: local('fonts/Helvetica Neue LT Std 45 Light'), url('fonts/HelveticaNeueLTStd Lt.woff') format('woff');
}

@font-face {
font-family: 'Helvetica 95 Black';
font-style: normal;
font-weight: normal;
src: local('fonts/Helvetica 95 Black'), url('fonts/HelveticaNeue-Black.woff') format('woff');
}

@font-face {
font-family: 'Square 721';
font-style: normal;
font-weight: normal;
src: local('fonts/Square 721'), url('fonts/Square 721 W03 Rom.woff') format('woff');
}

@font-face {
font-family: 'Helvetica Neue';
font-style: normal;
font-weight: normal;
src: local('fonts/Helvetica Neue WGL'), url('fonts/Helvetica Neue WGL.woff') format('woff');
}

@font-face {
font-family: 'Helvetica Neue Light';
font-style: normal;
font-weight: normal;
src: local('fonts/Helvetica Neue LT W06 45 Light'), url('fonts/Helvetica Neue LT W06 45 Light.woff') format('woff');
}

@font-face {
font-family: 'Saginaw  Bold';
font-style: normal;
font-weight: normal;
src: local('fonts/Saginaw  Bold'), url('fonts/Saginaw  Bold.woff') format('woff');
}

@font-face {
font-family: 'Neuropol X';
font-style: normal;
font-weight: normal;
src: local('fonts/Neuropol X'), url('fonts/Neuropol X.woff') format('woff');
}

@font-face {
font-family: 'NeuropolXW00-Condensed';
font-style: normal;
font-weight: normal;
src: local('fonts/NeuropolXW00-Condensed'), url('fonts/NeuropolXW00-Condensed.woff') format('woff');
}

@font-face {
font-family: 'Helvetica Rounded LT Bold Condensed';
font-style: normal;
font-weight: normal;
src: local('fonts/Helvetica Rounded LT Bold Condensed'), url('fonts/Helvetica Rounded LT Bold Condensed.woff2') format('woff2');
}

@font-face {
font-family: 'Digital Dare';
font-style: normal;
font-weight: normal;
src: local('fonts/Digital Dare'), url('fonts/Digital Dare.woff') format('woff');
}

@font-face {
font-family: 'SquareFont';
font-style: normal;
font-weight: normal;
src: local('fonts/SquareFont'), url('fonts/SquareFont.woff') format('woff');
}

@font-face {
font-family: 'Square Sans Serif 7';
font-style: normal;
font-weight: normal;
src: local('fonts/Square Sans Serif 7'), url('fonts/Square Sans Serif 7.woff') format('woff');
}

@font-face {
font-family: 'Cookie';
font-style: normal;
font-weight: normal;
src: local('fonts/Cookie'), url('fonts/Cookie.woff') format('woff');
}








/*
[T]				t    e    x    t
*/

@media screen and (max-device-width: 1023px) {

h1 {padding:0px;margin:0px;font-size:1.8em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}	/* thick titles */

h2 {padding:0px;margin:0px;font-size:1.32em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}	/* medium titles */

h3 {padding:0px;margin:0px;font-size:0.84em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}	/* intermediate titles */

h4 {padding:0px;margin:0px;font-size:0.84em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}

h5 {padding:0px;margin:0px;font-size:0.67em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}

p {padding:0px;margin:0px;font-size:11.3pt;letter-spacing:0.5pt;color:#000000;font-family:'Helvetica Neue LT Std 45 Light';}	/* text */

strong {padding:0px;margin:0px;font-size:11.3pt;letter-spacing:0.25pt;color:#000000;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}	/* strong */

.legend_black {padding:0px;margin:0px;font-size:0.67em;color:#000000;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';}

.legend_extended {padding:0px;margin:0px;font-size:0.67em;letter-spacing:0.25pt;color:#000000;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}

.legend_extended_white {padding:0px;margin:0px;font-size:0.67em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}

.legend_white {padding:0px;margin:0px;font-size:0.67em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';}

.legend_shadow {padding:0px;margin:0px;font-size:0.75em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black;}

.number {font-size: 3em;color:#FFFFFF; font-family:'Neuropol X', 'Helvetica Neue', 'Arial';}

.catch {font-size: 2em;color:#FFFFFF; font-family:'Cookie', 'Helvetica Neue', 'Arial';}

.catch_black {font-size: 2em;color:#000000; font-family:'Cookie', 'Helvetica Neue', 'Arial';}

.minicatch_black {font-size: 1.8em;color:#000000; font-family:'Cookie', 'Helvetica Neue', 'Arial';}

.pan {padding:0px;margin:0px;font-size:1.08em;letter-spacing:0.25pt;color:#000000;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}

.pan_white {padding:0px;margin:0px;font-size:1.08em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}

.minipan {padding:0px;margin:0px;font-size:0.67em;letter-spacing:0.25pt;color:#000000;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}

.pan_Cn {padding:0px;margin:0px;font-size:1em;letter-spacing:0.25pt;color:#000000;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';}

.pan_Cn_white {padding:0px;margin:0px;font-size:1.2em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';}

.minipan_Cn {padding:0px;margin:0px;font-size:0.75em;letter-spacing:0.25pt;color:#000000;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';}

}


@media screen and (min-device-width: 1024px) {
	
h1 {padding:0px;margin:0px;font-size:1.92em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}

h2 {padding:0px;margin:0px;font-size:1.44em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}

h3 {padding:0px;margin:0px;font-size:1.2em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}

h4 {padding:0px;margin:0px;font-size:1.06em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}

h5 {padding:0px;margin:0px;font-size:0.75em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}

p {padding:0px;margin:0px;font-size:11.3pt;letter-spacing:0.75pt;color:#000000;font-family:'Helvetica Neue LT Std 45 Light';}	/* text */

strong {padding:0px;margin:0px;font-size:11.3pt;letter-spacing:0.25pt;color:#000000;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}	/* strong */

.legend_black {padding:0px;margin:0px;font-size:0.75em;letter-spacing:0.25pt;color:#000000;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';}

.legend_extended {padding:0px;margin:0px;font-size:0.67em;letter-spacing:0.25pt;color:#000000;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}

.legend_extended_white {padding:0px;margin:0px;font-size:0.67em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}

.legend_white {padding:0px;margin:0px;font-size:0.75em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';}

.legend_shadow {padding:0px;margin:0px;font-size:0.75em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black;}

.number {font-size: 3em;color:#FFFFFF; font-family:'Neuropol X', 'Helvetica Neue', 'Arial';}

.catch {font-size: 2.4em;color:#FFFFFF; font-family:'Cookie', 'Helvetica Neue', 'Arial';}

.catch_black {font-size: 2.4em;color:#000000; font-family:'Cookie', 'Helvetica Neue', 'Arial';}

.minicatch_black {font-size: 2.4em;color:#000000; font-family:'Cookie', 'Helvetica Neue', 'Arial';}

.pan {padding:0px;margin:0px;font-size:1.08em;letter-spacing:0.25pt;color:#000000;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}

.pan_white {padding:0px;margin:0px;font-size:1.08em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}

.minipan {padding:0px;margin:0px;font-size:0.75em;letter-spacing:0.25pt;color:#000000;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}

.pan_Cn {padding:0px;margin:0px;font-size:1.2em;letter-spacing:0.25pt;color:#000000;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';}

.pan_Cn_white {padding:0px;margin:0px;font-size:1.2em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';}

.minipan_Cn {padding:0px;margin:0px;font-size:0.75em;letter-spacing:0.25pt;color:#000000;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';}

}








/*
[T=T]				c    o    m    m    o    n        t    e    x    t
*/

.maxititle_white {font-size:2.4em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}
.maxititle_white_Cn {font-size:2.4em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';}
.maxititle_black {font-size:2.4em;letter-spacing:0.25pt;color:#000000;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}
.maxititle_black_Cn {font-size:2.4em;letter-spacing:0.25pt;color:#000000;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';}

.title_white {font-size:1.6em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}
.title_white_Cn {font-size:1.6em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';}
.title_black {font-size:1.6em;letter-spacing:0.25pt;color:#000000;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}
.title_black_Cn {font-size:1.6em;letter-spacing:0.25pt;color:#000000;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';}

.minititle_white {font-size: 1.2em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}
.minititle_white_Cn {font-size: 1.2em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';}
.minititle_black {font-size: 1.2em;letter-spacing:0.25pt;color:#000000;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}
.minititle_black_Cn {font-size: 1.2em;letter-spacing:0.25pt;color:#000000;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';}

.microtitle_white {font-size: 0.58em;letter-spacing:0.25pt;color:#FFFFFF; font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}
.microtitle_white_Cn {font-size: 0.67em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';}
.microtitle_black {font-size: 0.58em;letter-spacing:0.25pt;color:#000000; font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}
.microtitle_black_Cn {font-size: 0.67em;letter-spacing:0.25pt;color:#000000;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';}

.script {font-size: 2em;font-family:'Saginaw  Bold';}

.counter_light {font-size: 1.2em;color:#FFFFFF;font-family:'SquareFont';}
.counter {font-size: 1.2em;color:#FFFFFF;font-family:'Digital Dare';}
.counter_black {font-size: 1.2em;color:#000000;font-family:'Digital Dare';}

.text_black {font-size: 1em;color:#000000;letter-spacing:0.25pt;font-family:'Helvetica Neue', 'Arial MT Bold';}
.text_white {font-size: 1em;color:#FFFFFF;letter-spacing:0.25pt;font-family:'Helvetica Neue', 'Arial MT Bold';}

.minitext_white {font-size: 0.75em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Neue', 'Arial MT Bold';}
.minitext_black {font-size: 0.75em;letter-spacing:0.25pt;color:#000000;font-family:'Helvetica Neue', 'Arial MT Bold';}

.number_Cn {font-size: 3em;letter-spacing:0.033em;color:#FFFFFF; font-family:'NeuropolXW00-Condensed', 'Helvetica Neue', 'Arial';}
.mininumber {font-size: 0.75em;letter-spacing:0.033em;color:#FFFFFF; font-family:'Neuropol X', 'Helvetica Neue', 'Arial';}

.board {font-size: 2em;color:#FFFFFF;letter-spacing:0.25pt;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}
.pagin {font-size: 2em;color:#FFFFFF;letter-spacing:0.25pt;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}
.pagin_Cn {font-size: 1.75em;color:#FFFFFF;letter-spacing:0.25pt;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';}
.pagin_on {font-size: 2em;color:#000000;letter-spacing:0.25pt;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}
.pagin_on_Cn {font-size: 1.75em;color:#000000;letter-spacing:0.25pt;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';}

.pagin_alone {font-size: 2em;color:#FFFFFF;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}
.pagin_alone_Cn {font-size: 1.75em;color:#FFFFFF;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';}

.microline_height {line-height: 0.67em;}








/*
[HTML]				h    t    m    l
*/
	
html{
scrollbar-color:#009999;
overflow-x: hidden;
}

body {
width:100%;
background-repeat:no-repeat;
background-attachment:fixed;
background-size: cover;
margin: 0px auto;
}

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

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #000000;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #000000;
}

::-ms-input-placeholder { /* Edge */
  color: #000000;
}

/* placeholders */
::-webkit-input-placeholder { opacity: 0.33; -webkit-transition: opacity .5s; transition: opacity .5s; }  /* Chrome 56, Safari 9 */
:-moz-placeholder { opacity: 0.33; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 4-18 */
::-moz-placeholder { opacity: 0.33; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 19-51 */
:-ms-input-placeholder { opacity: 0.33; -ms-transition: opacity .5s; transition: opacity .5s; } /* IE 10+ */
::placeholder { opacity: 0.33; transition: opacity .5s; } /* Modern Browsers */

/* focus */
*:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome 56, Safari 9 */
*:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */
*:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */
*:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */
*:focus::placeholder { opacity: 0; } /* Modern Browsers */








/*
[|]				s    c    r    o    l    l    b    a    r 
*/

/* width */
::-webkit-scrollbar {
  width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 5px 10px #003333;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #E11932;
  box-shadow: 2px 4px 4px #006666;
  border-radius: 10px;
}








/*
[|[]]				b    a    c    k    g    r    o    u    n    d    s
*/

@media screen and (max-device-width: 1023px) {
body#cooking{background-image:url('pictures/backgrounds/cooking_s.jpg');}
body#equipment{background-image:url('pictures/backgrounds/equipment_s.jpg');}
body#herbarium{background-image:url('pictures/backgrounds/herbarium_s.jpg');}
body#poi{background-image:url('pictures/backgrounds/poi_s.jpg');}
body#wolttolc{background-image:url('pictures/backgrounds/yart_s.jpg');}
body#user{background-image:url('pictures/backgrounds/user_s.jpg');background-size:cover;background-position:center;background-repeat:no-repeat;position:relative;}
}

@media screen and (min-device-width: 1024px) {
body#cooking{background-image:url('pictures/backgrounds/cooking.jpg');}
body#equipment{background-image:url('pictures/backgrounds/equipment.jpg');}
body#herbarium{background-image:url('pictures/backgrounds/herbarium.jpg');}
body#poi{background-image:url('pictures/backgrounds/poi.jpg');}
body#wolttolc{background-image:url('pictures/backgrounds/yart.jpg');}
body#user{background-image:url('pictures/backgrounds/user.jpg');background-size:cover;background-repeat:no-repeat;position:relative;}
}








/*
[<-)]								n        a        v        i        g        a        t        i        o        n
*/


/*
[0]				t    o    p
*/

#top{
width:100%;
height:58px;
//background-image:linear-gradient(60deg, #00647D, #003333);
//border-width:0px 0px 2px 0px;
//border-color:white;
//border-style:solid;
//box-shadow: 0px 4px 8px #006666;
text-align:center;
overflow:hidden;
z-index:3;
position:fixed;
}



#boite{
animation-name:Knife;
animation-duration:1s;
animation-iteration-count:1;

position:fixed;
height:84px;
border: solid 1px rgba(255, 255, 255, 0.5);
border-radius:10px 0px 10px 10px;
background-color: rgba(255, 255, 255, 0.33);
left:10%;
top:50px;
z-index:2;
padding:0px;
}


@keyframes Knife{
	0%{top:0px;}
	100%{top:50px;}
}


@media screen and (max-device-width: 1023px) {
.notonsmartphone{
display:none;
}
}

@media screen and (min-device-width: 1024px) {
.notonlaptop{
display:none;
}
}




@media screen and (max-device-width: 1023px) {
#region_number{
top:50px;
left:20%;
}
}

@media screen and (min-device-width: 1024px) {
#region_number{
top:75px;
left:11%;
}
}


@media screen and (max-device-width: 1023px) {
#relist{
top:144px;
right:0px;
}
}

@media screen and (min-device-width: 1024px) {
#relist{
bottom:-20px;
left:50%;
}
}











#top_wolttolc{
width:100%;
min-height:58px;
height:auto;
background-image:linear-gradient(-90deg, #003232, #000000);
border-width:0px 0px 2px 0px;
border-color:white;
border-style:solid;
box-shadow: 0px 4px 8px #006666;
text-align:center;
overflow:hidden;
z-index:3;
position:fixed;
}




/*
[/\]				l    o    g    o
*/

@media screen and (max-device-width: 1023px) {
#logo{
float:left;
left:2%;
top:10px;
z-index:1000;
width:18%;
position:fixed;
max-width:72px;
}
}

@media screen and (min-device-width: 1024px) {
#logo{
float:left;
left:2%;
top:10px;
z-index:1000;
width:8%;
position:fixed;
}
}




@media screen and (max-device-width: 1023px) {
#miniardenne{
display:block;
}
}
@media screen and (min-device-width: 1024px) {
#miniardenne{
display:none;
}
}




/*
[mM]				m    i    n    i    m    a    p
*/

@media screen and (max-device-width: 1023px) {
#minimap{
z-index:10;
width:48px;
}
}

@media screen and (min-device-width: 1024px) {
#minimap{
z-index:10;
width:96px;
}
}








/*
[/\]				b    r    a    n    d
*/

@media screen and (max-device-width: 1023px) {
#brand{
display:none;visibility:hidden;
}
}

@media screen and (min-device-width: 1024px) {
#brand{
left:12%;
top:3px;
width:58%;
position:fixed;
display:flex;
}
}




/*
[:P]				l    a    n    g    u    a    g    e    s
*/

@media screen and (max-device-width: 1023px) {
#languages{
display:none;
}
}
@media screen and (min-device-width: 1024px) {
#languages{
display:block;
}
}




/*
[-O]				s    e    a    r    c    h    b    a    r
*/

@media screen and (max-device-width: 1023px) {
#searchfile{
top:6px;
width:72%;
position:absolute;
vertical-align:middle;
left:12%;
}
}

@media screen and (min-device-width: 1024px) {
#searchfile{
width:50%;
left:33%;
top:10px;
position:absolute;
vertical-align:middle;
}
}








/*
[jQ]				j    Q    u    e    r    y
*/

.ui-autocomplete { 
position: absolute;
cursor: pointer; 
background:#00647D;
border-style:solid;
border-width:0px 2px 2px 2px;
border-color:white;
-webkit-border-radius: 0px 0px 8px 8px;
-moz-border-radius: 0px 0px 8px 8px;
border-radius: 0px 0px 8px 8px;
box-shadow: 4px 3px 6px #223333;
width:200px;
list-style-type: none;
z-index:1000000;
color:white;
font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';
line-height:24px;
}


.ui-menu-item{
    display: block;
    padding: 6px;
    clear: both;
    line-height: 18px;
    color: #FFFFFF;
    text-decoration: none;
}



.ui-menu {
    display:block;
	padding:4px;
}


.ui-state-hover, .ui-state-active {
    color: #000000;
    text-decoration: none;
    background-color: #FFFFFF;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    background-image: none;
	padding:4px;
}





/* DEBUT calendrier JS : jsSimpleDatePickr */

#calendarMain1, #calendarMain2{
    margin-left: 20%;
}
/* conteneur calendrier */
.calendarWrap{
    display: none;
    position: absolute;
    z-index: 1000;
    width: 210px;
    padding: 5px 10px 10px 10px;
    background-color: #2e373f;
    /*background-color: rgba(46, 55, 63, 0.95);*/
    border-radius: 10px;
    -moz-box-shadow: 0 0 10px #555;
    -webkit-box-shadow: 0 0 10px #555;
    box-shadow: 0 0 10px #555;
    font-size: 12px;
}
/* bouton d'affichage*/
#calendarMain1 > input, #calendarMain2 > input{
    display: block;
    width: 100px;
    height: 22px;
    padding-top: 2px;
    background-color: #2e373f;
    color: #fff;
    border-radius: 5px;
    border: none;
}
#calendarMain1 > input:hover, #calendarMain2 > input:hover{
    background-color: #2673cb;
}
/* navigation dans le calendrier */
.calendarWrap ul{
    margin: 5px 0 10px 0;
    padding: 0;
}
.calendarWrap li{
    margin: 0;
    padding: 0;
    width: 20px;
    display: inline-block;
    *display: inline;
}
.calendarWrap li.calendarTitle{
    width: 170px;
    color: #ccc;
    text-align: center;
}
.calendarWrap li input{
    width: 20px;
    background-color: #5d6f7f;
    border: none;
    color: #fff;
}
.calendarWrap li input:hover{
    background-color: #6f8598;
}
/* calendrier */
.jsCalendar{
    color: #fff;
    border-collapse: collapse;
}
.jsCalendar th{
    color: #8ba7bf;
    font-size: 16px;
    font-weight: normal;
    text-align: center;
}
.jsCalendar td{
    padding: 0;
    border: none;
}
.jsCalendar a{
    display: block;
    width: 30px;
    padding: 3px 0 3px 0;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
}
.jsCalendar .day:hover a{
    background-color: #2673cb;
    border-color: #2673cb;
}
.jsCalendar .selectedDay a{
    background-color: #c44d38;
    border-color: #c44d38;
}
/* FIN calendrier JS : jsSimpleDatePickr */









/*
[M]								m        a        p
*/


@media screen and (max-device-width: 1023px) {
#map {width:100%;height:100%;position:fixed;bottom:0px;}

}
@media screen and (min-device-width: 1024px) {
#map {width:100%;height:100%;position:fixed;bottom:0px;}

}




@media screen and (max-device-width: 1023px) {
.leaflet-container .leaflet-control-mouseposition {
	background-color: rgba(75, 200, 175, 1);
	border-style:solid;
	border-color:white;
	border-width:2px;
	padding: 2px 5px 2px 5px;
	margin:0;
	color: #FFF;
	font-family: 'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';
	font-size: 1em;
	border-radius: 5px;
}
}
@media screen and (min-device-width: 1024px) {
.leaflet-container .leaflet-control-mouseposition {
	background-color: rgba(75, 200, 175, 1);
	border-style:solid;
	border-color:white;
	border-width:2px;
	padding: 0 5px;
	margin:0;
	color: #FFF;
	font-family: 'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';
	font-size: 2em;
	border-radius: 5px;
}
}


.leaflet-control-zoom {
	top:60px;
}


.leaflet-control-zoom-display {
    background-color:#4BC8AF;
    width: 24px;
    height: 24px;
    line-height: 24px;
    display: block;
    text-align: center;
	vertical-align:middle;
    text-decoration: none;
    color: white;
	font-size: 2em;
	font-family: 'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';
	border-radius:6px;
	border-width:2px;
	border-style:solid;
	border-color:white;
}


@media screen and (max-device-width: 1023px) {
#feature_infos {
	display:none;
    width:auto;
    height:auto;
    position:fixed;
    bottom:6px;
    right:6px;
    padding:5px;
    border-style:none;
	z-index:100000;
	vertical-align:bottom;
	border-radius: 10px;
	background: white;
 -webkit-box-shadow: 
    4px 3px 6px #223333;
  -moz-box-shadow: 
    4px 3px 6px #223333;
  -o-box-shadow: 
    4px 3px 6px #223333;
  box-shadow: 
    4px 3px 6px #223333;
	}	
}

@media screen and (min-device-width: 1024px) {
#feature_infos {
	display:none;
    width:0;
    height:0;	
}
}

#info {
}



#feature_infos2 {
	overflow-y:auto;
	overflow-x:hidden;
	display:block;
    max-width:200px;
    height:75vh;
    position:fixed;
    bottom:6px;
    right:6px;
    padding:5px;
    border-style:none;
	z-index:100000;
	vertical-align:bottom;
	border-radius: 10px;
	background: white;
 -webkit-box-shadow: 
    4px 3px 6px #223333;
  -moz-box-shadow: 
    4px 3px 6px #223333;
  -o-box-shadow: 
    4px 3px 6px #223333;
  box-shadow: 
    4px 3px 6px #223333;
	}	


.popup-fixed {
  position: fixed;
  top: 30% !important;
  left: 1% !important;
  transform: none !important;
  margin: 0;
  border-radius: 0;
}

@media screen and (max-device-width: 1023px) {
#pop{
top:120px;
width:89%;
}
}



@media screen and (min-device-width: 1024px) {
#pop{
top:100px;
width:25%;
}
}








/*
[[]<]				d    a    s    h    b    o    a    r    d    s
*/

@media screen and (max-device-width: 1023px) {

#dashbloc{
position:absolute;
top:195px;
}
#dashbloc2{
position:absolute;
top:195px;
width:88%;
}
#space{
width:6%;
}

.dashboard2{
margin:0px 10px 0px 0px;
padding:0px;
width:100%;
height:288px;
background-image:url('pictures/light_face.png');
background-repeat: no-repeat;
background-position: left;
background-color: rgba(255,255,255,0.75);
border:solid 1px rgba(255, 255, 255, 0.1);
border-radius: 100px 100px 60px 60px;
overflow-x:scroll;
overflow-y:hidden;
z-index:3;
box-shadow: inset 3px 3px 30px #223333;
text-align:center;
white-space:nowrap;
}

}



@media screen and (min-device-width: 1024px) {

#dashbloc{
position:absolute;
top:15%;
}
#dashbloc2{
position:absolute;
top:20%;
width:88%;
display:table-cell;
}
#space{
width:6%;
min-width:96px;
}

.dashboard2{
margin:0px 10px 0px 0px;
padding:0px;
width:100%;
height:288px;
background-image:url('pictures/light.png');
background-repeat: no-repeat;
background-position: left;
background-color: rgba(255,255,255,0.75);
border:solid 1px rgba(255, 255, 255, 0.1);
border-radius: 480px 480px 120px 120px;
overflow-x:scroll;
overflow-y:hidden;
z-index:3;
box-shadow: inset 3px 3px 30px #223333;
text-align:center;
white-space:nowrap;
}

}








.dashboard{
float:left;
margin:0px 10px 0px 0px;
padding:0px;
width:320px;
height:288px;
background-color: rgba(255,255,255,0.75);
border:solid 1px rgba(255, 255, 255, 0.1);
border-radius: 350px 350px 120px 120px;
overflow-x:scroll;
overflow-y:hidden;
z-index:3;
white-space:nowrap;
box-shadow: inset 3px 3px 30px #223333;
text-align:center;
}


.dashboard_new{
margin:0px;
padding:0px;
width:100%;
height:288px;
overflow-x:scroll;
overflow-y:hidden;
z-index:3;
text-align:center;
white-space:nowrap;
}


#dashboard_microcard{
white-space:normal;
width:42%;
min-width:150px;
height:auto;
display:inline-block;
text-align:center;
overflow:hidden;
padding:1px;
margin:0px 6px 12px 0px;
border-style:none;
border-radius:8px;
background-color:white;
}


#dashboard_microcard2{
white-space:normal;
display:inline-block;
width:96px;
max-width:96px;
height:312px;
text-align:center;
overflow:hidden;
padding:1px;
margin:0px 6px 24px 0px;
border: solid 0px rgba(0, 0, 0, 0);
border-radius:6px;
background-color:white;
}




@media screen and (max-device-width: 1023px) {

.dashboard_frame{
margin:0px;
padding:0px;
width:100%;
height:384px;
overflow-x:auto;
overflow-y:hidden;
z-index:3;
text-align:center;
white-space:nowrap;
}

#dashboard_minicard{
white-space:normal;
display:inline-block;
width:96px;
max-width:96px;
height:360px;
text-align:center;
overflow:hidden;
padding:1px;
margin:0px 6px 24px 0px;
border: solid 0px rgba(0, 0, 0, 0);
border-radius:6px;
background-color:white;
}

}

@media screen and (min-device-width: 1024px) {

.dashboard_frame{
margin:0px;
padding:0px;
width:100%;
height:348px;
overflow-x:auto;
overflow-y:hidden;
z-index:3;
text-align:center;
white-space:nowrap;
}

#dashboard_minicard{
white-space:normal;
display:inline-block;
width:96px;
max-width:96px;
height:324px;
text-align:center;
overflow:hidden;
padding:1px;
margin:0px 6px 24px 0px;
border: solid 0px rgba(0, 0, 0, 0);
border-radius:6px;
background-color:white;

}
}








#welcome{
right:12px;
top:65px;
width:288px;
z-index:3;
overflow:hidden;
position:fixed;
}








/*
[[O]!]				i    m    m    e    r    s    i    o    n
*/

@media screen and (max-device-width: 1023px) {

#immersion{
background-size:cover;
}

}

@media screen and (min-device-width: 1024px) {

#immersion{
background-size:100% 100%;
}

}






/*
[i]				l	e	g	e	n	d
	   
*/

#legend{
right:100px;
top:65px;
width:48px;
z-index:2;
overflow:hidden;
position:fixed;
}



@media screen and (max-device-width: 1023px) {
#legend_card{
box-shadow: 4px 3px 6px #223333;
margin:0 auto;
padding:6px;
z-index:2;
position:fixed;
left:5px;
top:144px;
text-align:center;
height:auto;
width:92%;
overflow-x:hidden;
overflow-y:auto;
background:#00647D;
border-radius: 20px 10px 10px 20px;
border-style:solid;
border-width:3px;
border-color:white;
bottom:6px;
}
}
@media screen and (min-device-width: 1024px) {
#legend_card{
box-shadow: 4px 3px 6px #223333;
padding:12px;
z-index:2;
position:fixed;
left:50%;
top:0%;
text-align:center;
transform:translate(-50%,8.5%);
height:80vh;
width:25%;
overflow-x:hidden;
overflow-y:auto;
background:#00647D;
border-radius:18px;
border-style:solid;
border-width:3px;
border-color:white;
}
}








/*
[°°]				b    u    t    t    o    n    s
*/

@media screen and (min-device-width: 1024px) {
#button_languages{
display:none;
}
}




.image_button {
width: 100%;
height: 100%;
}


.image_button img {
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
-webkit-transition: all 4s ease; /* Safari et Chrome */
-moz-transition: all 4s ease; /* Firefox */
-ms-transition: all 4s ease; /* Internet Explorer 9 */
-o-transition: all 4s ease; /* Opera */
transition: all 4s ease;
}
.image_button:hover img {
/* L'image pivote à 360° */
-webkit-transform:rotate(360deg); /* Safari et Chrome */
-moz-transform:rotate(360deg); /* Firefox */
-ms-transform:rotate(360deg); /* Internet Explorer 9 */
-o-transform:rotate(360deg); /* Opera */
transform:rotate(360deg);
}








/*
[[F]]				c    a    r    d    s
*/

@keyframes Breath{
	0%{left:-100vw;}
	100%{left:12px;}
}




@media screen and (max-device-width: 1023px) {
#card{
animation-name: Breath;
animation-duration: 0.33s;
animation-iteration-count: 1;

padding:0px 0px 0px 0px;
margin:0 auto;
margin-left:6px;
margin-right:6px;
width:auto;
z-index:1;
overflow-x:hidden;
overflow-y:visible;
height:auto;
background-color:white;
box-shadow: 4px 3px 6px #223333;
border-radius: 20px 10px 10px 20px;
position:fixed;
bottom:6px;
top:144px;
border:3px solid white;
}
}


@media screen and (min-device-width: 1024px) {
#card{
animation-name: Breath;
animation-duration: 0.33s;
animation-iteration-count: 1;

padding:0px 0px 0px 0px;
margin:0 auto;
float:left;
width:30%;
z-index:1;
overflow-x:hidden;
overflow-y:visible;
height:auto;
background-color:white;
border: solid 3px rgba(255, 255, 255, 1);
border-radius: 20px 10px 10px 20px;
box-shadow: 4px 3px 6px #223333;
position:fixed;
bottom:24px;
top:18%;
left:5px;
}
}


@media screen and (max-device-width: 1023px) {
#wallpaper{
margin:0 auto;
margin-left:6px;
margin-right:6px;
width:90%;
z-index:0;
overflow-x:hidden;
overflow-y:visible;
height:auto;
position:fixed;
bottom:6px;
top:144px;
border:none;
}
}


@media screen and (min-device-width: 1024px) {
#wallpaper{
margin:0 auto;
float:right;
width:60%;
z-index:1;
overflow-x:hidden;
overflow-y:visible;
height:auto;
border:none;
position:fixed;
bottom:24px;
top:18%;
right:24px;
}
}








@media screen and (max-device-width: 1023px) {
#walk_card{
animation-name: Breath;
animation-duration: 0.33s;
animation-iteration-count: 1;

padding:0px 0px 0px 0px;
margin:0 auto;
margin-left:6px;
margin-right:6px;
width:auto;
z-index:1;
overflow-x:hidden;
overflow-y:visible;
height:auto;
background-color:white;
box-shadow: 4px 3px 6px #223333;
border-radius: 20px 10px 10px 20px;
position:fixed;
bottom:6px;
top:144px;
border:3px solid white;
}
}


@media screen and (min-device-width: 1024px) {
#walk_card{
animation-name: Breath;
animation-duration: 0.33s;
animation-iteration-count: 1;

padding:0px 0px 0px 0px;
margin:0 auto;
float:left;
width:30%;
z-index:1;
overflow-x:hidden;
overflow-y:visible;
height:auto;
background-color:white;
border: solid 3px rgba(255, 255, 255, 1);
border-radius: 20px 10px 10px 20px;
box-shadow: 4px 3px 6px #223333;
position:fixed;
bottom:24px;
top:18%;
left:5px;
}
}



@media screen and (max-device-width: 1023px) {
#card_dyn{
padding:0px 0px 0px 0px;
margin:115px 5px 0px 5px;
float:left;
width:95%;
z-index:1;
overflow-x:hidden;
overflow-y:visible;
height:75vh;
background-image:linear-gradient(0deg, rgba(255,255,255,0.66), rgba(255,255,255,1));
border: solid 2px rgba(255, 255, 255, 1);
box-shadow: 4px 3px 6px #223333;
border-radius: 20px 10px 10px 20px;
position:fixed;
}
}

@media screen and (min-device-width: 1024px) {
#card_dyn{
padding:0px 0px 0px 0px;
margin:8.5% 0px 0px 10px;
float:left;
width:25%;
z-index:1;
overflow-x:hidden;
overflow-y:visible;
height:75.5vh;
background: rgba(255,255,255,1);
border: solid 2px rgba(255, 255, 255, 1);
box-shadow: 4px 3px 6px #223333;
border-radius: 20px 10px 10px 20px;
position:fixed;
}
}




#maxicard{
width:95%;
height:75.5vh;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
overflow-x:hidden;
overflow-y:visible;
box-shadow: 4px 3px 6px #223333;
border-radius: 20px;
text-align:center;
position:fixed;
bottom:0;
left:0;
right:0;
margin:auto;
top:72px;
background-image:linear-gradient(-60deg, rgba(255,255,255,0.16), rgba(255,255,255,0.33));
border: solid 1px rgba(255, 255, 255, 1);
float:left;
}








/*
[[]]]				p    r    i    n    t
*/

#print{
width:375px;
border-style:solid;
border-width:0px 1px 0px 1px;
border-color:#7D7D7D;
}











@media screen and (max-device-width: 1023px) {
#remap{
display:block;
}
}

@media screen and (min-device-width: 1024px) {
#remap{
display:none;
}
}


@media screen and (max-device-width: 1023px) {
.remap{
display:block;
}
}

@media screen and (min-device-width: 1024px) {
.remap{
display:none;
}
}










@media screen and (max-device-width: 1023px) {
#profile{
top:100px;
width:95%;
}
#user_sd{
width:90%;
}
#user_tastes{
width:45%;
}
}
@media screen and (min-device-width: 1024px) {
#profile{
top:0;
width:50%;
}
#user_sd{
width:95%;
}
#user_tastes{
width:48.25%;
}
}






/*
[mb]				m    o    d    a    l          b    o    x    e    s
	   
*/

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  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.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #FFFFFF;
  margin:0px;
  padding: 10px;
  border-radius:0px 8px 8px 0px;
  width: 768px; /* Could be more or less, depending on screen size */
  height: 800px; /* Could be more or less, depending on screen size */  
}

/* The Close Button */
.close {
  color: #000000;
  float: right;
  font-size: 28px;
  font-weight: bold;
  position:relative;
  top:0;
  right:10px;
}

.close:hover,
.close:focus {
  color: red;
  text-decoration: none;
  cursor: pointer;
}



.subbutton {
  background-color: #FFFFFF;
  transition-duration: 0.4s;
  cursor: pointer;
  height:48px;  
  width:48px;
  border-style:none;
  border-radius:30px;
  background-size:45px 45px;
  background-repeat:no-repeat;
  margin:0px 4px 10px 4px;
}

.subbutton1 {
  background-color: white; 
}

.subbutton1:hover {
  background-color: #CCFF00;
}


/* The Close Button */
.closebox {
  color: #FFFFFF;
  float: right;
  font-size: 28px;
  font-weight: bold;
  position:absolute;
  top:0;
  right:10px;
}

.closebox:hover,
.closebox:focus {
  color: red;
  text-decoration: none;
  cursor: pointer;
}



.goto {
  color: #FFFFFF;
  font-size: 1em;
  line-height:1px;
  font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';
}

.goto:hover,
.goto:focus {
  color: #CCFF00;
  text-decoration: none;
  cursor: pointer;
}









/*
[L]				f    o    o    t    e    r
	   
*/

@media screen and (max-device-width: 1023px) {
#bottom{
width:100%;
height:60px;
overflow:hidden;
z-index:3;
vertical-align:bottom;
}
}

@media screen and (min-device-width: 1024px) {
#bottom{
width:100%;
height:60px;
overflow:hidden;
z-index:3;
position:fixed;
bottom:0px;
right:0px;
vertical-align:bottom;
}
}


@media screen and (max-device-width: 1023px) {
#bottom2{
width:100%;
height:48px;
overflow:hidden;
z-index:3;
position:fixed;
bottom:0px;
right:0px;
vertical-align:bottom;
background-image:linear-gradient(60deg, #009999, #006666);
border-width:2px 0px 0px 0px;
border-color:white;
border-style:solid;
box-shadow: 0px 0px 10px #003333;
}
}

@media screen and (min-device-width: 1024px) {
#bottom2{
width:100%;
height:48px;
overflow:hidden;
z-index:3;
position:fixed;
bottom:0px;
right:0px;
vertical-align:bottom;
background-image:linear-gradient(60deg, #009999, #006666);
border-width:2px 0px 0px 0px;
border-color:white;
border-style:solid;
box-shadow: 0px 0px 10px #003333;
}
}








/*
[p]				p    a    g    i    n    a    t    i    o    n
*/

#page{
background-color: #00647D;
border-radius:48px;
border:solid 3px white;
min-width:38px;
height:38px;
padding:3px;
padding-top:5px;
margin:3px;
overflow:hidden;
float:left;
text-align:center;
vertical-align:middle;
}

#page_on{
background-color: #E1FF00;
border:solid 3px black;
border-radius:8px;
min-width:38px;
height:38px;
padding:3px;
margin:3px;
overflow:hidden;
float:left;
text-align:center;
vertical-align:middle;
}

#page_alone{
background-color: #00647D;
border:solid 3px white;
border-radius:8px;
min-width:38px;
height:38px;
padding:3px;
margin:3px;
overflow:hidden;
float:left;
text-align:center;
vertical-align:middle;
}








/*
[I]				i    m    a    g    e    s
*/

.zoom{
width:auto;
height:auto;
padding:0px;
margin:0 auto;
overflow:hidden;
margin-top:6px;
margin-left:3px;
margin-right:3px;
}

.zoom1 {
width:100%;
height:auto;
padding:0px;
margin:1px 0px 0px 0px;
overflow:hidden;
}


.zoom2 {
width:100%;
height:auto;
padding:0px;
margin:1px 0px 0px 0px;
overflow:hidden;
}

.image {
width: 100%;
height: 100%;
}

.image_map {
width: 100%;
height: 100%;
transform: rotate(-3deg);
}



.image img {
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
-webkit-transition: all 1s ease; /* Safari et Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* Internet Explorer 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.image:hover img {
/* L'image est grossie de 50% */
-webkit-transform:scale(1.5); /* Safari et Chrome */
-moz-transform:scale(1.5); /* Firefox */
-ms-transform:scale(1.5); /* Internet Explorer 9 */
-o-transform:scale(1.5); /* Opera */
transform:scale(1.5);
}


.image_map img {
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
-webkit-transition: all 0.5s ease; /* Safari et Chrome */
-moz-transition: all 0.5s ease; /* Firefox */
-ms-transition: all 0.5s ease; /* Internet Explorer 9 */
-o-transition: all 0.5s ease; /* Opera */
transition: all 0.5s ease;
}
.image_map:hover img {
/* L'image est grossie de 33% */
-webkit-transform:scale(1.33) rotate(3deg) translate(0px, 15px); /* Safari et Chrome */
-moz-transform:scale(1.33) rotate(3deg) translate(0px, 15px); /* Firefox */
-ms-transform:scale(1.33) rotate(3deg) translate(0px, 15px); /* Internet Explorer 9 */
-o-transform:scale(1.33) rotate(3deg) translate(0px, 15px); /* Opera */
transform:scale(1.33) rotate(3deg) translate(0px, 15px);
}








/*
[POP!]				p    o    p    u    p    s
*/


@media only screen and (max-width: 600px) {
#blue_popup{
background-color:rgba(0, 100, 125, 0.9);
width:90%;
height:auto;
max-height:75vh;
position:fixed;
top:115px;
bottom:65px;
left:0;
right:0;
margin:0 auto;
box-shadow:4px 6px 16px #446666;
border-radius:12px;
border-style:solid;
border-width:2;
border-color:white;
overflow-y:auto;
z-index:100000000000;
}
}
@media only screen and (min-width: 601px) {
#blue_popup{
background-color:rgba(0, 100, 125, 0.9);
width:33%;
height:auto;
max-height:67vh;
position:fixed;
top:100px;
bottom:0;
left:0;
right:0;
margin:auto;
box-shadow:4px 6px 16px #446666;
border-radius:12px;
border-style:solid;
border-width:2;
border-color:white;
overflow-y:auto;
}
}


{box-sizing: border-box;}

/* The popup form - hidden by default */
.form-popup {
width: 100%; /* Full width */
height: 100%; /* Full height */
display: none;
position: fixed;
border: none;
z-index: 1000;
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}



.form-popup2 {
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  display: none;
  position: fixed;
  border: none;
  z-index: 2000000;
  background-color: rgba(0,0,0,0.33); /* Black w/ opacity */
  top : 0px;
  bottom : 0px;
  left: 0px;
  right:0px;
}


/* Add styles to the form container */
.form-container {
max-width: 300px;
padding: 10px;
background-color: #00647D;
border-style:solid;
border-width:3px;
border-color:white;
border-radius:12px; 
box-shadow: 4px 3px 6px #223333;
z-index: 1000;
}

.triangle {
 height:0;
 width:0;
 border-top:100px solid white;
 border-right:100px solid transparent
}








/*
[>:]				s    h    o    p 
*/

.cart {
width:36px;
height:36px;
cursor: pointer;
transition: 0.8s ease-out;
text-align:center;
background-image:url('pictOpat/important/object/shop.svg');
background-size:36px 36px;
background-repeat:no-repeat;
margin-top:18px;
z-index:1000;
position:relative;
}


.cart-dropdown{
position:fixed;
min-width:144px;
right:6px;
margin-top:24px;
background-color:#00647D;
padding:24px;
border:solid 3px white;
text-align:left;
border-radius:8px;
list-style-image: url('vectors/chips/square_white_mini.svg');
}


#in-cart-items-num{
min-width:24px;
width:24px;
height:24px;
max-height:24px;
background-color:#00647D;
border-radius:6px;
position:absolute;
margin-left:2px;
margin-top:-2px;
padding:4px 0px 0px 0px;
border:solid 2.5px white;
}








/*
[?]				t    h    e    m    e    s
*/

#presentoir_cards{
white-space: normal;
width:100px;
max-width:100px;
height:auto;
display:inline-block;
text-align:center;
overflow:hidden;
padding:1px;
margin:0px 3px 0px 0px;
border-style:none;
border: solid 1px rgba(255, 255, 255, 1);
border-radius:6px;
background-color: rgba(255, 255, 255, 0.33);
box-shadow: 2px 1px 6px #223333;
}




@media screen and (max-device-width: 1023px) {
#sweep2{
width:48px;
height:48px;
z-index:2;
overflow:hidden;
right:12px;
bottom:20px;
position:fixed;
}
}
@media screen and (min-device-width: 1024px) {
#sweep2{
width:48px;
height:48px;
z-index:2;
overflow:hidden;
left:77%;
bottom:20px;
position:fixed;
}
}








/*
[...]				c    a    r    d          b    l    u    e          c    o    m    p    l    e    m    e    n    t
*/


#card_complement{
width:95%;
padding:4px;
text-align:center;
}

#signature{ 
position:fixed;
right:12px;
bottom:6px;
z-index:-1;
background:transparent;
}




@media only screen and (max-width: 1023px) {
	
#equipment_list{
margin:0 auto;
margin-bottom:24px;
margin-top:45%;
width:95%;
background-image:linear-gradient(-60deg, rgba(255,255,255,0.9), rgba(255,255,255,1));
height:auto;
min-height:80vh;
padding:0px 0px 0px 0px;
overflow:hidden;
box-shadow: 4px 4px 12px #223333;
border: solid 1px rgba(255, 255, 255, 0.5);
border-radius: 10px;
}	
	
#equipment_text{
margin:0 auto;
width:95%;
height:auto;
padding:0px 0px 0px 0px;
overflow:hidden;
border-top: solid 2px rgba(255, 255, 255, 0.5);
border-left: solid 2px rgba(0, 0, 0, 0.1);
border-right: solid 2px rgba(255, 255, 255, 0.25);
border-bottom: solid 2px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(5px);
}

}


@media only screen and (min-width: 1024px) {
	
#equipment_list{
float:left;
margin:12% 0px 24px 24px;
width:25%;
background-image:linear-gradient(-60deg, rgba(255,255,255,0.9), rgba(255,255,255,1));
height:auto;
padding:0px 0px 0px 0px;
overflow:hidden;
box-shadow: 4px 3px 12px #223333;
border: solid 1px rgba(255, 255, 255, 0.5);
border-radius: 10px;
}

#equipment_text{
float:left;
margin:12% 6px 0px 24px;
width:66%;
height:auto;
padding:0px 0px 0px 0px;
overflow:hidden;
border-top: solid 2px rgba(255, 255, 255, 0.5);
border-left: solid 2px rgba(0, 0, 0, 0.1);
border-right: solid 2px rgba(255, 255, 255, 0.25);
border-bottom: solid 2px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

}




@media screen and (max-device-width: 1279px) {
#presentoir{
width:75%;
margin:0px;
padding:0px;
position:fixed;
left:10px;
bottom:3px;
height:auto;
background:none;
border-radius: 10px 0px 0px 0px;
overflow-x:scroll;
overflow-y:hidden;
z-index:2;
white-space:nowrap;
border-width:0px 3px 0px 0px;
border-style:solid;
border-color:rgba(0, 0, 0, 0.75);
}
}


@media screen and (min-device-width: 1280px) {
#presentoir{
width:75%;
margin:0px;
padding:0px;
position:fixed;
left:10px;
bottom:3px;
height:auto;
background:none;
border-radius: 10px 0px 0px 0px;
overflow-x:scroll;
overflow-y:hidden;
z-index:2;
white-space:nowrap;
border-width:0px 3px 0px 0px;
border-style:solid;
border-color:rgba(0, 0, 0, 0.75);
}
}




@media screen and (max-device-width: 1279px) {
#activity_add{
width:90%;
height:66vh;
}
#planning{
margin:106px 0px 36px 12px;
}
#planning_cont{
margin:0px 0px 0px 12px;
width:95%;
}
}

@media screen and (min-device-width: 1280px) {
#activity_add{
width:33%;
height:75vh;
}
#planning{
margin:158px 0px 36px 60px;
}
#planning_cont{
margin:0px 0px 0px 60px;
width:95%;
}
}

#minicard_planning{
text-align:center;
border-radius:8px;
box-shadow: 4px 3px 6px #223333;
overflow:hidden;
padding:0px 0px 0px 0px;
margin:0px 3px 6px 3px;
border: solid 1px rgba(255, 255, 255, 1);
opacity:0.9;
}




@media screen and (max-device-width: 1279px) {
#infranavigation{
margin:33% 0px 0px 4px;
background-color: transparent;
width:97%;
padding:0px 0px 0px 0px;
overflow:auto;
float:left;
height: auto;
text-align:center;
height:70vh;
}
}


@media screen and (min-device-width: 1280px) {
#infranavigation{
margin:10% 0px 0px 40%;
background-color: transparent;
width:60%;
padding:0;
overflow:hidden;
float:left;
height: auto;
text-align:center;
}
}