@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;800&display=swap');

* { -webkit-font-smoothing:antialiased; -moz-font-smoothing:antialiased; font-smoothing:antialiased;
-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;
text-rendering:optimizeLegibility !important; }

* { margin:0; padding:0; border:0; }
html, body { width:100%; height:100%; margin:0; padding:0; font-family:'Quicksand', sans-serif; font-size:1em !important; font-weight:400; line-height:1.6em; letter-spacing:0em; }

body { width:100%; height:100%; min-height:100%; margin:0; top:0px !important; background:url(/images/bg.jpg) center center #111 no-repeat; background-size:cover;
   
--color-text: #fff;
--color-textAlt: #ffcc66;
--color-bg: #111;
--color-link: #fff;
--color-link-hover: #ffcc66;
--color-menu: #fff;
--color-menu-hover: #ffcc66;
--color-menu-current: #ffcc66;
--color-footer: #fff;
--color-footer-hover: #ffcc66;
--color-bgoverlay: #111111;

color: var(--color-text);
background-color: var(--color-bg);
	
-ms-overflow-x: hidden;
    overflow-x: hidden;
    
-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;

-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
font-smoothing:antialiased;

text-rendering:optimizeLegibility !important;

-webkit-font-smoothing:subpixel-antialiased;
-moz-font-smoothing:subpixel-antialiased;
-o-font-smoothing:subpixel-antialiased;
-ms-font-smoothing:subpixel-antialiased;
font-smoothing:subpixel-antialiased;
    
-webkit-font-smoothing:antialiased; -moz-font-smoothing:antialiased; font-smoothing:antialiased;
-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;
text-rendering:optimizeLegibility !important;
	
-moz-osx-font-smoothing: grayscale;
}

::selection { background:var(--color-text); color:var(--color-bg); text-shadow: none; /* Safari */	}
::-moz-selection { background:var(--color-text); color:var(--color-bg); text-shadow: none; /* Firefox */ }

img { -ms-interpolation-mode:bicubic; vertical-align:middle; }
svg:not(:root) { overflow:hidden; }
a, img { border:0; text-decoration:none; outline:none; }
strong { font-weight:800; }

/* WARNING */
.warning {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(/images/warning.jpg) center center; background-size: cover;
  z-index: 99999999999999;
  display: none;
}

/* CONTENTS */
.contents { position:absolute; width:100%; height:100%; top:0; left:0; margin:0; text-align:center; z-index:2; }

.event { position:relative; top:50%; left:50%; margin:0; text-align:center;
    
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}

.logo { background:url(/images/logo_liff_white.svg) no-repeat center; background-size:100%; width:300px; height:282px; margin:0 auto; text-align:center; opacity:1; }
	
.desc { font-family:'Montserrat', serif; font-size:1.2em; font-weight:400; line-height:1em; text-transform:uppercase; letter-spacing:4px; color:var(--color-textAlt); text-align:center; margin:40px 0 0 0;
-webkit-font-smoothing:antialiased; -moz-font-smoothing:antialiased; font-smoothing:antialiased;
}
.desc span { font-size:.9em; font-weight:400; text-transform:uppercase; letter-spacing:4px; color:var(--color-text); text-align:center; margin:0; }
.desc div { line-height:1.2em; }

.social { text-align:center; margin:20px 0 0 0;  }
.social a { font-size:1.4em;  color:var(--color-link); padding:0; text-decoration:none; outline:none;
    
-webkit-transition:all 0.3s ease-in-out 0.3s;
-moz-transition:all 0.3s ease-in-out 0.3s;
-o-transition:all 0.3s ease-in-out 0.3s;
transition:all 0.3s ease-in-out 0.3s;
}

.social a:hover, .social a:focus { background:transparent; color:var(--color-link-hover);
    
-webkit-transition:all 0.3s ease-in-out 0.3s;
-moz-transition:all 0.3s ease-in-out 0.3s;
-o-transition:all 0.3s ease-in-out 0.3s;
transition:all 0.3s ease-in-out 0.3s;
}

.overlay { position:fixed; width:100%; height:100%; left:0; top:0; background:rgba(0, 0, 0, 0.2); overlay:hidden; z-index:1; }

/* FOOTER */
footer { position:fixed; display:flex; flex-flow:wrap; flex-direction:row; justify-content:center; align-items:center; padding:0; bottom:40px; text-align:center; width:100%; height:30px; z-index:3; }
footer .copyright { width:auto; height:auto; font-size:.6em; font-weight:600; color:var(--color-text); text-transform:uppercase; letter-spacing:.1em; padding:3px 9px; background:#073455;
-webkit-font-smoothing:antialiased; -moz-font-smoothing:antialiased; font-smoothing:antialiased;
-webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px;
}

/* Mobile */
@media all and (max-width: 860px) and (orientation: landscape) {
    
    .warning { display:block !important; }
    
}

@media all and (max-width: 860px) {
	
    html, body, body > .main,
    html, body, body > .wrapper { height: 100%; margin: 0; padding: 0; }
    
	/*HOMEPAGE */
	.logo { width:200px; height:188px; }
    .desc { font-size:.9em; letter-spacing:4px; margin:40px 0 0 0; }
    
}