/* COMMONS */
@font-face { font-family: 'Century Gothic', 'Century Gothic Bold'; src: local("Century_Gothicf"), local("Century_Gothicf_Bold"),  url("../fonts/GOTHIC.TTF"), url("../fonts/GOTHICB.TTF"), format("ttf"); }
/* * { font-family: "Century Gothic"; }
body { overflow: auto; padding: 0; margin: 0; border: none; border-collapse: collapse; max-width: 100%; max-height: 100%; background-color: #ddd;}*/
//section { width: 100% ; margin: auto;  position: relative; display: block; float: left;  }
/*h2 { font-size: 24px; display: block; float: left; margin: 0; line-height: 24px; margin-bottom: 10px; }
h3,h4 { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }*/
.container { max-width: 1600px; width: calc(100% - 40px); padding: 0px 20px; margin: auto;  position: relative; }
h3.Bloc_Title { line-height: 36px; font-size: 36px; color: #fff; text-align: left; display: block; float: left; margin: auto; }
#loading { display: block; float: left; position: absolute; z-index: -1; width: 75px; height: 75px; left: 160px; top: 150px; }
#loading img { width: 100%; height: 100%; }
#loading p { color: #fff; margin-top: -5px; font-size: 12px; text-align: center; }
.Hidden { display: none !important; pointer-events: none; }
.Hid { opacity: 0; }
.col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 { position: relative; display: block; float: left; margin: 0px 10px; min-height: 1px; }
.col-12 { width: calc(100% - 20px); min-width: calc(100% - 20px); }
.col-11 { width: calc(91.66% - 20px); min-width: calc(91.66% - 20px); }
.col-10 { width: calc(83.33% - 20px); min-width: calc(83.33% - 20px); }
.col-9 { width: calc(75% - 20px); min-width: calc(75% - 20px); }
.col-8 { width: calc(66.66% - 20px); min-width: calc(66.66% - 20px); }
.col-7 { width: calc(58.33% - 20px); min-width: calc(58.33% - 20px); }
.col-6 { width: calc(50% - 20px); min-width: calc(50% - 20px); }
.col-5 { width: calc(41.66% - 20px); min-width: calc(41.66% - 20px); }
.col-4 { width: calc(33% - 20px); min-width: calc(33% - 20px); }
.col-3 { width: calc(25% - 20px); min-width: calc(25% - 20px); }
.col-2 { width: calc(16.66% - 20px); min-width: calc(16.66% - 20px); }
.col-1 { width: calc(8.33% - 20px); min-width: calc(8.33% - 20px); }
/* BACKGROUNDS */
section#PopUp #BG { position: fixed; z-index: 100; top: 0; bottom: 0; left: 0; right: 0; pointer-events: bounding-box; }
section#PopUp .bg_grey { top: 0; width:100%; height:100%; position: absolute; z-index: -1; background-color: rgba(0,0,0,0.75); }
section#PopUp #BG img { width: 400px; top: 190px; position: absolute; }
section#PopUp .container { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 101; pointer-events: none; }

section#D3_Section { width: 100%; max-width: 1400px; margin: auto; margin-top: 50px; float: unset; }
section#D3_Section div.D3_Scene .Shad { top: 34%; width: 57%; margin: auto; display: block; left: 20%; position: absolute; z-index: -1; }
section#D3_Section div.D3_Scene .Grid { width: 100%; position: absolute; z-index: -2; top: 20%; }
section#D3_Section div.D3_Scene .Shad img,
section#D3_Section div.D3_Scene .Grid img  { width: 100%; }

section#D3_Section div.D3_Scene { display: block; float: left; width: 50%; position: relative; z-index: 100;  }
section#D3_Section div#Emojis { display: block; float: right; width: 50%; position: relative; z-index: 100; }
section#D3_Section div#Emojis .Emoji { width: 20%; display: block; float: left; background-color: #fff; border-radius: 50%; margin-right: 5%; margin-bottom: 10px; position: relative; }
section#D3_Section div#Emojis .Emoji i { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 30px; font-size: 30px; height: 30px; display: none; color: #fff; }
section#D3_Section div#Emojis .Emoji.Selected img { opacity: 0.25; }
section#D3_Section div#Emojis .Emoji.Selected i { display: block; }
section#D3_Section div#Emojis .Emoji.Playing img { opacity: 1; }
section#D3_Section div#Emojis .Emoji.Playing i { display: none; }
section#D3_Section div#Emojis .Emoji_Dots { width: 20%; display: block; float: left; border-radius: 50%; margin-right: 5%; }
section#D3_Section div#Emojis .Emoji_Dots .Dots { width: auto; height: 20px; float: left; display: block; }
section#D3_Section div#Emojis .Emoji_Dots .Dots .Dot { width: 20px; height: 20px; display: block; float: left; border-radius: 50%; margin-left: 9px; margin-top: 6vw; background-color: #fff; }
section#D3_Section div#Emojis .Emoji img { width: 100%; border-radius: 50%; margin: auto; display: block; cursor: pointer; }
/**/
footer#D3_Footer { background-color: unset; }
/**/
@media (max-width: 921px){
	section#D3_Section div#Emojis { width: 100%; }
	section#D3_Section div.D3_Scene { width: 100%; }
	section#D3_Section div.D3_Scene canvas { width: 100vw; height: 100vw; }
	section#D3_Section div#Emojis .Emoji_Dots .Dots .Dot { width: 3vw; height: 3vw; margin-top: 14vw; }
}