/* added - navbar */
#navbar {
	width: 100%;
	background: url("images/nav_back.jpg") repeat 0 0;
	margin: 0 auto;
}

#navbar ul {
	display: flex;
	margin: 0;
	padding: 0.2em 2em 0px 2em;
	list-style-position: outside;
}

#navbar ul li {
	display: block;
	float: left;
	margin: 0.5em auto; /*1.3vh 0 0.7vh 9vw*/
}

#navbar ul li a {
	color: #fff;
	text-decoration: none;
	font-weight: bold;
}

.fixed {
	position: sticky;
	top: -1px;
	width: 100%;
	z-index: 10000;
}	

@media (min-width: 487px){	
	#navbar ul li a {
		font-size: 1.7vw;
	}
	
	#notice {
		max-width: 940px;
		padding: 30px;
	}
}

@media (max-width: 486px){
	#navbar ul li a {
		font-size: 3vw;
	}
	
	.fixed {
		height: 3.7em;
	}
	
	#notice {
		color:#fff;
		margin: 0 30px;
	}

	#notice h1 {
		line-height: 1.4em;
	}
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* added - Lazy Loader for youtube */

.youtube {
    background-color: #000;
    margin-bottom: 30px;
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    cursor: pointer;
}

.youtube img {
    width: 100%;
    top: -16.84%;
    left: 0;
    opacity: 0.7;
	height: auto;
}

.youtube .play-button {
    width: 90px;
    height: 60px;
    background-color: #333;
    box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
    z-index: 1;
    opacity: 0.8;
    border-radius: 6px;
}

.youtube .play-button:before {
    content: "";
    border-style: solid;
    border-width: 15px 0 15px 26.0px;
    border-color: transparent transparent transparent #fff;
}

.youtube img,
.youtube .play-button {
    cursor: pointer;
}

.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
    position: absolute;
}

.youtube .play-button,
.youtube .play-button:before {
    top: 50%;
    left: 50%;
    transform: translate3d( -50%, -50%, 0 );
}

.youtube iframe {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

/* Generated by http://css.spritegen.com CSS Sprite Generator */
 
.flag_img_au, .flag_img_br, .flag_img_ca, .flag_img_cn, .flag_img_de, .flag_img_eu, 
.flag_img_hk, .flag_img_mx, .flag_img_my, .flag_img_pa, .flag_img_sg, .flag_img_sw, 
.flag_img_th, .flag_img_tw, .flag_img_uk, .flag_img_us
{ display: inline-block; background: url("images/footer_flags.png") no-repeat; }
 
.flag_img_au { background-position: -1px -0px; width: 46px; height: 32px; }
.flag_img_br { background-position: -48px -0px; width: 46px; height: 32px; }
.flag_img_ca { background-position: -95px -0px; width: 46px; height: 32px; }
.flag_img_cn { background-position: -142px -0px; width: 46px; height: 32px; }
.flag_img_de { background-position: -1px -33px; width: 46px; height: 32px; }
.flag_img_eu { background-position: -48px -33px; width: 46px; height: 32px; }
.flag_img_hk { background-position: -95px -33px; width: 46px; height: 32px; }
.flag_img_mx { background-position: -142px -33px; width: 46px; height: 32px; }
.flag_img_my { background-position: -1px -66px; width: 46px; height: 32px; }
.flag_img_pa { background-position: -48px -66px; width: 46px; height: 32px; }
.flag_img_sg { background-position: -95px -66px; width: 46px; height: 32px; }
.flag_img_sw { background-position: -142px -66px; width: 46px; height: 32px; }
.flag_img_th { background-position: -1px -99px; width: 46px; height: 32px; }
.flag_img_tw { background-position: -48px -99px; width: 46px; height: 32px; }
.flag_img_uk { background-position: -95px -99px; width: 46px; height: 32px; }
.flag_img_us { background-position: -142px -99px; width: 46px; height: 32px; }



.howto-01, .howto-02, .howto-03, .howto-04, .howto-05, 
.howto-06, .howto-07, .howto-08
{ max-width: 100%; background-size: 100%; background-image: url("images/howto.jpg"); }
 
.howto-01 { background-position: 0 0%; background-size: 100%; }
.howto-02 { background-position: 0 14.285714%; background-size: 100%; }
.howto-03 { background-position: 0 28.571429%; background-size: 100%; }
.howto-04 { background-position: 0 42.857143%; background-size: 100%; }
.howto-05 { background-position: 0 57.142857%; background-size: 100%; }
.howto-06 { background-position: 0 71.428571%; background-size: 100%; }
.howto-07 { background-position: 0 85.714286%; background-size: 100%; }
.howto-08 { background-position: 0 100%; background-size: 100%; }