@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

.cards{
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	cursor:pointer;
	vertical-align:top;
	float:left;
	/*-moz-animation: scale 0.3s linear;
	-webkit-animation: scale 0.3s linear;
	animation: scale 0.3s linear;*/
}


.cardHolder{
	background-color:rgba(0,0,0,0.6);
	display:inline-block; 
	vertical-align:top;
	text-align:left;
	overflow:hidden;
}

.cardHolder table.heading{
	width:100%;
	height:100%;
	vertical-align:middle;
	text-align:center;
	margin:auto;
}
table#heading{
	border-spacing:0;
}

table#heading p{
	text-align:center;
}

table#heading p a{
    text-decoration: none;
	color:#aaa;
}
table#heading p a:visited{
	color:#aaa;
}

table#heading table {
	margin:0;
	padding:0;
}
table#heading td{
	//border:1px solid #fff;
}

.cardHolder table#menu{
	vertical-align:middle;
	text-align:center;
	margin:auto;
}

table#menu td{
	text-align:right;
	padding:0;
	//border:1px solid #fff;
}

.cardHolder table select, .cardHolder table input[type='submit'], .cardHolder table input[type='text']{
	margin:0;
}

@keyframes scale {
 0%   { transform: scale(0.6); }
 100% { transform: scale(1);   }
}

.scale{
	-moz-animation: scale 0.3s linear;
	-webkit-animation: scale 0.3s linear;
	animation: scale 0.3s linear;
}

img.icon:hover {
	transform: scale(1.1);
	z-index:1;
}

@keyframes fadeIn  {
 0%   { opacity:0; }
 100% { opacity:1; }
}


table#showCard{
	z-index:99;
	background-color:rgba(0,0,0,0.9);
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	background-attachment: fixed;
	
	width:100vw;
	height:100vh;
	position:fixed;
	margin:auto;
	top:0;
	bottom:0;
	left:0;
	right:0;
	display:none;
	
	-moz-animation: fadeIn 0.3s linear;
	-webkit-animation: fadeIn 0.3s linear;
	animation: fadeIn 0.3s linear;
}
table#showCard td{
	vertical-align:middle;
	text-align:center;
}

table#showCard img{
	max-width:80vw;
	max-height:80vh;
}

table#showCard img.closeButton:hover {
		transform: scale(1.05);
	}

html,body{
	padding:0;
	margin:0;
}

body{
	//overflow-x:hidden;
	//font-family: 'Noto Sans TC', sans-serif;
	font-weight: 400;
	background-image: url('../images/bg-image.jpg');
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	background-attachment: fixed;
	color:#fff;
}
body:after{
	content:"";
	position:fixed; /* stretch a fixed position to the whole screen */
	top:0;
	height:100vh; /* fix for mobile browser address bar appearing disappearing */
	left:0;
	right:0;
	z-index:-1; /* needed to keep in the background */
	background-image: url('../images/bg-image.jpg');
	background-position:center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
a{
    text-decoration: none;
	color:#fff;
}
a:visited{
	color:#fff;
}
input[type='text']{
	text-align:center;
	//font-family: 'Noto Sans TC', sans-serif;
	font-weight: 400;
	box-sizing: border-box;
    border: 0;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    border-radius: 3px;
	-moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
	overflow: hidden;
	color: #000;
}


option{
	color:#000000;
	z-index:2;
	display:inline-block;
}

input[type='button']::-moz-focus-inner {
	border: 0;
}

select, input[type='submit'], input[type='button'], table#menu span{
	text-align-last:center;
	cursor:pointer;
    display: inline-block;
	font-weight: 400;
	//font-family: 'Noto Sans TC', sans-serif;
	box-sizing: border-box;
	border: 0;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    border-radius: 3px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
	overflow: hidden;
	color: #fff;
	z-index:2;
}

table#menu span{
	display:inline-block;
	cursor:pointer;
	padding:0;
	margin:0;
	background-image: url('../images/arrow.png'),
	/*linear-gradient(168deg, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 51%,rgba(30,105,222,1) 100%);*/
	linear-gradient(to right,#FFB300, #FF9A00);
    background-repeat: no-repeat, repeat;
    background-position: right .3em top 50%, 0 0;
    background-size: .65em auto, 100%;	
}

label{
	cursor:pointer;
	text-align:center;
}
label span{
	text-align:center;
}
label span:hover{
	background-image: url('../images/arrow.png'),	
	linear-gradient(to right,rgba(255,255,255,1) 5%, #FFB300 10%, #FF9A00);
}

input[type='checkbox']{
	display:none;
}

select.blueButton{
    background-image: url('../images/arrow.png'),
	/*linear-gradient(168deg, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 51%,rgba(30,105,222,1) 100%);*/
	linear-gradient(to right,#FFB300, #FF9A00);
    background-repeat: no-repeat, repeat;
    background-position: right .3em top 50%, 0 0;
    background-size: .65em auto, 100%;	
	cursor:pointer;
}
.blueButton{
    background: linear-gradient(to right,#FFB300, #FF9A00);
}

input[type='submit']:hover, input[type='button']:hover{
	transform: scale(1.05); 
}

select.blueButton:hover{
    background-image: url('../images/arrow.png'),	
	linear-gradient(to right,rgba(255,255,255,1) 5%, #FFB300 10%, #FF9A00);
}
input[type='submit'].blueButton:hover, input[type='button'].blueButton:hover{
    background:linear-gradient(to right,rgba(255,255,255,1) 5%, #FFB300 10%, #FF9A00);
}


.cardHolder.ads span.pages{
	position:absolute;
	text-align:center;
	vertical-align:middle;
	z-index:2;
	cursor:pointer;
}
.cardHolder.ads span.pages:hover{
	background-color:rgba(0,0,0,0.7);	
}

.cardHolder.ads span.pages img{
	opacity:0.7;
	cursor:pointer;
}
.cardHolder.ads span.pages img:hover{
	transform:scale(1.15);
}
.cardHolder.ads span.pages#previous img{
	-moz-animation: movingleft 0.75 infinite;
	-webkit-animation: movingleft 0.75s infinite;
	animation: movingleft 0.75s infinite;
}	
.cardHolder.ads span.pages#next img{
	-moz-animation: movingright 0.75 infinite;
	-webkit-animation: movingright 0.75s infinite;
	animation: movingright 0.75s infinite;
}

.cardHolder.ads div{
	//width:100%;
	//height:100%;
	padding:0;
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	cursor:pointer;
}

.top-right{
	float:right;
	text-align:right;
}


@keyframes fadeIn  {
 0%   { opacity:0; }
 100% { opacity:1; }
}

@keyframes fadeOut  {
 0%   { opacity:1; }
 100% { opacity:0; }
}
.cardHolder.ads iframe.youtube, .cardHolder.ads div{
	-moz-animation: fadeIn 1s linear;
	-webkit-animation: fadeIn 1s linear;
	animation: fadeIn 1s linear;
}

a.link{
	font-style:italic;
	color:#FFFF9F;
	//white-space:nowrap;
}


.red{
	background-color:#e70210;
	color:#FFF;
	//white-space:nowrap;
}
.blue{
	background-color:#0066b4;
	color:#FFF;
	//white-space:nowrap;
}
.yellow{
	background-color:#ffe202;
	color:#000;
	//white-space:nowrap;
}
.green{
	background-color:#06a737;
	color:#FFF;
	//white-space:nowrap;
}
.black{
	background-color:#444444;
	color:#FFF;
	//white-space:nowrap;
}
.purple{
	background-color:#920984;
	color:#FFF;
	//white-space:nowrap;
}
.white{
	background-color:#ffffff;
	color:#000;
	//white-space:nowrap;
}



@supports (-webkit-touch-callout: none) {
	body{
		font-family: PingFang, sans-serif;
	}
	input[type='text']{
		font-family: PingFang, sans-serif;
	}
	select, input[type='submit'], input[type='button'], table#menu span{
		font-family: PingFang, sans-serif;
	}
}

@supports not (-webkit-touch-callout: none) {
	body{
		font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
	}
	input[type='text']{
		font-family: 'Microsoft JhengHei', sans-serif;
	}
	
	select, input[type='submit'], input[type='button'], table#menu span{
		font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
	}
}