
h1, h2, h3, h4, h5 { font-family: 'Abril Fatface', cursive; }
body { font-family: 'Figtree', sans-serif; color:#fff; font-size: 1.2em; font-weight:400;
background: #222035 url('../img/pat/p22.png');
 }

h1 { font-size:2.5em; margin-bottom:25px; text-shadow: 5px 5px 0px #020067; }
h2 { font-size:2em; margin-bottom:15px; text-shadow: 3px 3px 0px #CCDFDA; }
h3 { font-size:1.75em; margin-bottom:15px; color:#222035; font-weight: 500;  }
h4 { font-size:1.5em; margin-bottom:5px; color:#fbf665; text-shadow: 2px 2px 0px #100; }
h5 { font-size:1.25em; font-weight: 300; color:#575267; }

.box1 {
  background: url('../img/b1r.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.logo { float:left; margin:40px 0 0 0; }
#logo { background-image: url('../img/degangs_top.png'); background-repeat: no-repeat; background-size: contain; width:320px; height:200px; }

.logo-m { float:left; margin:10px 0 20px 0; }
#logo-m { background-image: url('../img/degangs_top.png'); background-repeat: no-repeat; background-size: contain; width:150px; height:90px; }

.menu { margin:20px 0; }
#TEXT { float:left; width:18%; font-size:0.9em; padding:10px 10px 0 0; }

.DEGOLD { float:right; background:#fff; border-radius: 8px; color:#333; margin-bottom:20px; 
    background: #fff url('../img/degold.png') no-repeat 5% center; background-repeat: no-repeat; background-size: 10%; }
.DEGOLD .degold { padding:20px 20px 20px 60px; margin-bottom: 0 !important; }
.DEGOLD .get { text-decoration: none; background:#575267; border-radius: 4px;  margin-left: 20px; padding:6px 10px; color:#fff; }
.DEGOLD .price { font-weight: bold; margin-left: 10px; }

#MENU { float:right; margin-bottom:20px; }
#MENU li { display:inline-block; padding:10px 5px; }
#MENU a { text-transform:uppercase; text-decoration:none; color:#fff; padding:12px 18px; border:1px solid rgba(255, 255, 255, .0); 
    font-family: 'Barlow', sans-serif !important; font-size:1em; font-weight:600; }
#MENU a:hover { border:1px solid rgba(255, 255, 255, .5); color:#fbf655; border-radius:12px; }
#MENU .a a { border:1px solid #fbf655; border-radius:12px; color:#fbf655 !important; }
#MENU .wa a { border:1px solid rgba(255, 255, 255, .5); border-radius:12px; }

.menu_bottom { font-weight: 300 !important; }
.menu_bottom a:hover { color:#fbf655; }

#SUBMENU { float:right; margin-bottom:25px; }
#SUBMENU li { display:inline-block; padding:10px 5px; }
#SUBMENU a { text-transform:uppercase; text-decoration:none; color:#fff; padding:12px 18px; border:1px solid rgba(255, 255, 255, .0); font-family: 'Barlow', sans-serif !important; font-size:1.1em; font-weight:300; }
#SUBMENU a:hover { border:1px solid rgba(255, 255, 255, .5); color:#fbf655; border-radius:12px; }
#SUBMENU a.ps { border-radius:8px; text-decoration:none; padding:10px 24px; font-size:18px; font-weight:bold; color:#fff; background:#ac61b9; }

.cl { clear:both; }

#spot { min-height:100%; background:#ccc;
  background: url('../img/b2s.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#spot .back { min-height:100%; background: url('../img/spot.png') no-repeat 90% bottom; background-size: 42%; }
#spot .grad { min-height:100%; background: rgb(255,12,0); background: linear-gradient(0deg, rgba(255,12,0,0.3) 0%, rgba(255,0,148,0.3) 35%, rgba(0,212,255,0.6) 90%) }
#spot .cont { min-height:100%; width:80%; padding:40px 0 ; margin:0 auto; }

#spot .header { font-family: 'Abril Fatface', cursive; font-size:3em; margin-bottom:15px; text-shadow: 5px 5px 0px #020067; }
#spot .text { font-size:1.4em; font-weight:500; margin-bottom:30px; text-shadow: 2px 2px 0px #020067;  }
#spot .micro { width:300px; float:left; font-size:0.9em; font-weight:500; margin-left:25px; text-shadow: 1px 1px 0px #020067; }
#spot .micro a { color:#fff; }
#spot .intro { width:45%; margin:60px 0; min-width:300px; max-width:700px; }
#spot .press { float:left; margin-bottom:20px; }


.p0 { display:inline-block; border-radius:8px; text-decoration:none; padding:10px 24px; font-size:18px; font-weight:500; color:#fff; border:1px solid #b7c1de; margin:0 10px 10px 0; }
.p1 { display:inline-block; border-radius:12px; text-decoration:none; padding:14px 32px; font-size:24px; font-weight:bold; color:#fff; background:#1261d1; }
.p2 { display:inline-block; border-radius:8px; text-decoration:none; padding:10px 24px; font-size:18px; font-weight:bold; color:#fff; background:#ac61b9; margin:0 10px 10px 0; }
.p3 { display:inline-block; border-radius:6px; text-decoration:none; padding:8px 18px; font-size:16px; font-weight:bold; color:#fff; background:#63345e; margin:0 5px 5px 0; }
.p4 { display:inline-block; border-radius:6px; text-decoration:none; padding:6px 14px; font-size:14px; font-weight:300; color:#111; background:#b7c1de; margin:0 5px 5px 0; }
.p5 { display:inline-block; border-radius:6px; text-decoration:none; padding:7px 16px; font-size:14px; font-weight:500; color:#b7c1de; border:1px solid #b7c1de; margin:0 5px 5px 0; }
.p6 { display:inline-block; border-radius:6px; text-decoration:none; padding:4px 10px; font-size:13px; font-weight:300; color:#111; background:#fff; margin:0 5px 5px 0; }

ul.sub { margin-bottom:20px; border-bottom:1px solid #ccc; } /* border-bottom:1px solid #ccc; */
ul.sub li { list-style:none; display:block; float:left; padding:10px 15px; }
ul.sub li a { color:#333; text-decoration:none; }
ul.sub li.here { padding:10px 15px; background:#FF9; /* border-bottom:1px solid #fff !important; border-top:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc; */ }


#MOBILE {
    display: none;
	position: absolute;
	top:0;
	left:0;
	width: 100%;
    min-height: 100%;
	background: #222;
}
.mobile_close { position: absolute; top:25px; right:25px; border:0px;	display: inline-block; background-image: url('../img/close.png'); background-repeat: no-repeat; background-size: contain; width:30px; height:30px; }
#MOBILE .mobile_menu { padding:20px; }
#MOBILE .mlogo div { height: 80px; width:300px; }
#MOBILE .mlogo { margin:20px 0 30px 0; background-image: url('../img/degangs_top.png'); background-repeat: no-repeat; background-size: contain; width:150px; height:80px; }
#MOBILE p { margin-bottom: 20px; }
#MOBILE a {  font-family: 'Barlow', sans-serif !important; font-size:1em; font-weight:500; color:#fff; text-decoration: none; }
.mobile_show { position: absolute; top:25px; right:25px; border:0px; display: none; background-image: url('../img/menu.png'); background-repeat: no-repeat; background-size: contain; width:30px; height:30px; }
#MOBILE .text { font-size: 0.8em; }
.mshow { display: none; }	

.red { color:#900; }

.guide_img { text-align: center; }
.guide_img img {width:240px;}

p { margin-bottom:15px; }
.upper { font-size:1.3em; font-style: italic; }

.box .grad { background: rgb(255,12,0); background: linear-gradient(0deg, rgba(255,0,148,0.3) 0%, rgba(255,12,0,0.3) 35%, rgba(0,212,255,0.6) 90%) }
.box .cont {  width:80%; padding:40px; margin:0 auto; }

.box1 .back { background: url('../img/c1.png') no-repeat 75% 60% fixed; background-size: 30%; }
.box1 .coin_holder { width:45%; max-width:600px; margin:40px 0; }

.block { width:80%; margin:0 auto; }
.block div { }
.spacer { margin-bottom: 175px !important; width:1px; }
.menu_bottom { width:80%; margin:0 auto; }

.page { clear:both; width:80%; margin:50px auto; }
.page_box30 { float:left;width:30%; background:#fff;border-radius:24px;color:#333; border-bottom:1px solid #ccc; }
.page_box30 div { padding:30px; }
.page_box70 { float:left;width:70%; background:#fff;border-radius:24px;color:#333; border-bottom:1px solid #ccc; }
.page_box70 div { padding:30px; }
.page_box50 { float:left;width:50%; background:#fff;border-radius:24px;color:#333; border-bottom:1px solid #ccc; }
.page_box50 div { padding:40px; }
.page_cont { padding:40px; background:#fff;border-radius:24px;padding:40px;color:#333; border-bottom:1px solid #ccc; }
.grad1 { padding:80px 0; background: linear-gradient(0deg, rgba(56,62,101,0.3) 0%, rgba(0,212,255,0.3) 90%); }
.page_bl { float:left; width:70%; margin-right:3%; }
.page_br { float:left; width:25%; }

.b1 { width:40%; float:left; text-align:center; }
.b2 { width:40%; float:left; margin:0 10%; }
.b2l { width:40%; float:left; margin:0 10% 0 0; }
.b2r { width:40%; float:left; margin:0 0 0 10%; }
.b3 { width:30%; float:left; margin:0 0; }
.b0 { width:100%; float:left; margin:0 0; }
.bc { width:70%; margin:0 auto; }

.submenu p { margin-bottom:25px; }
.submenu a { color:#fff; font-size:1.1em; text-decoration: none; }

.box .header { font-family: 'Abril Fatface', cursive; font-size:3em; margin-bottom:15px; text-shadow: 5px 5px 0px #020067; }
.box .text { font-size:1.4em; font-weight:500; margin-bottom:30px; text-shadow: 2px 2px 0px #020067;  }
.box .micro { width:300px; float:left; font-size:0.9em; font-weight:500; margin-left:25px; text-shadow: 1px 1px 0px #020067; }

.foot { width:100%; clear:both; background:#222035; }
.foot .cont { width:80%; padding:60px 0; margin:0 auto; color:#838894; }
.nano { font-size:0.8em; }
.disc { font-size:0.7em; text-transform: uppercase; }
.foot a { color:#838894; }
.foot hr {   display: block;
  margin:30px 0;
  clear:both;
  border-width: 1px !important;
  border-color: #353548 !important;
  background:#353548; }
.wh { color:#fff !important; }

/* INDEX */

ul.list li { padding-left:4px; margin-left:25px; list-style: circle; }
.bar { font-family: 'Barlow', sans-serif; }

table.list td { border-bottom:1px solid #ccc;  padding:10px; color:#111; }
table.list th { border-bottom:1px solid #aaa; margin-top:10px; background: #f0f0f0; color:#333; font-weight: bold; padding:10px; }
table.list { border-top:1px solid #ccc; }

table.boxes { border-collapse: collapse; }
table.boxes td { padding:10px; font-size:0.9em; border:1px solid #ccc; color:#111; }
/* ICONS */

.i-16 { width:16px; height:16px; display:inline-block; }
.i-20 { width:20px; height:20px; display:inline-block; margin:0 0 3px 0; }
.i-24 { width:24px; height:24px; display:inline-block; }
.i-32 { width:32px; height:32px; display:inline-block; }

.i-cash { background-image: url('../img/i-cash.png'); background-repeat: no-repeat; background-size: contain; }
.i-star { background-image: url('../img/i-star.png'); background-repeat: no-repeat; background-size: contain; }
.i-gems { background-image: url('../img/i-gems.png'); background-repeat: no-repeat; background-size: contain; }
.i-degold { background-image: url('../img/degold.png'); background-repeat: no-repeat; background-size: contain; }
.i-scan { background-image: url('../img/i-scan.png'); background-repeat: no-repeat; background-size: contain; }

table.stat { margin:10px 0; border:1px solid #ccc; }
table.stat th { font-size:14px; color:#333; padding: 10px; background-color: #f0f0f0; border-left:1px solid #ddd; text-align:left; }
table.stat td {	padding: 8px; border-left:1px solid #dedede; border-bottom:1px solid #dedede; }

/* SCALE */

@media screen and (max-width: 500px) {
  body { font-size:1.1em !important; }
  #spot { height: auto !important; }
  #spot .back { background-size: 80%; background-position: center bottom; }
  #spot .intro { margin:40px 0 250px 0 !important; }  
}

@media screen and (max-width: 768px) {
    #TEXT { display: none; }

    .page_box70 {
        width: 100%;
    }
    .page_box30 {
        width: 100%;
    }
    .page_box50 {
        width: 100%;
    }

  #MENU { width:100% !important; padding:0; display: none; }
  #SUBMENU { display: none; }
  .spacer { margin-bottom: 50px !important; }
  .b1, .b2, .b2l, .b2r, .b3, .b0, .bc { width:100% !important; display:block !important;margin:0 !important; }
  .mhide { display: none !important; }
  .mshow { display: inline-block !important; }	
  .mobile_show { display: block !important; }
	.guide_img img { width:150px !important; }
	.guide_img { display: block; width:100%; }
	.page_bl { width:100%; }
	.page { width:100% !important; margin:0 auto; }
	#spot .cont { width:100% !important; margin:0 30px !important; }
    .page_box50 { width:100% !important; }
    #logo { width:240px; height:150px; }

}

.note { font-size:13px; color:#666; }

._tbg { font-size:5em; }
._tb0 { font-size:4em; }
._tb1 { font-size:3em; } /* h1=2.4 */
._tb2 { font-size:2.8em; }
._tb3 { font-size:2.2em; } 
._tb4 { font-size:1.7em; } /* h2=2.0 */
._tb5 { font-size:1.5em; } /* h3=1.8 */
._tb6 { font-size:1.3em; } /* h4=1.4 */
._tb7 { font-size:1.2em; }

@media screen and (max-width:760px) {
	.ghost1 { display:none; }
}
@media screen and (max-width:400px) {
	.ghost2 { display:none; }
}
@media screen and (min-width:760px) {
	.mobi { display:none; }
}

@media screen and (max-width: 700px) {
  .box1 .coin_holder { width:100% !important; margin:20px 0 !important; }
  .box1 .back { background-image: url('') !important; }
	.DEGOLD { float: inherit !important; clear: both; display: inline-block !important; }
}
@media screen and (min-width: 500px) and (max-width: 900px) {
  .block { width:95% !important; }
}
/*
@media screen and (min-width: 601px) {
  body { font-size:0.7em; }
}
*/
/* Before 1300px */
@media screen and (max-width: 1300px) {
  #spot .header { font-size:2em !important; }
  
}
/* Small screen devices (501px and above) */
/*
@media screen and (min-width: 501px) {
  body { font-size:1.2em; }
}
*/
/* Big screen devices (900px and above) */
/*
@media screen and (min-width: 900px) {
  body { font-size:1em; }
}
*/

/* Extra big screen devices (1450px and above) */
/*
@media only screen and (min-width: 1450px) {
  body { font-size:1.1em !important; }

}
*/
@media screen and (max-width: 1200px) {
  #TEXT { margin-top:20px; }
  .logo { margin-top:20px; }

}

/* Extra tall screens */
@media only screen and (min-height: 900px) and (min-width: 600px) {
  #spot .intro { margin-top:80px !important; }
  #spot .back { background-size: 48%; }
}

/* Extra wide screens */
@media only screen and (max-height: 700px) and (min-width: 500px) {
  #spot { height:850px !important; }
}
