﻿/*#E00032
#CF1E1B being
#E1B91C souls
#4695A5 core

#E1B91C
#CF1E1B
#4695A5
#AACC03
#E1B91C
*/


*, html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img,
ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i,figure, figcaption {margin: 0;padding: 0;border: 0;outline: 0;font-style: normal;font-size: 100%;font-family: inherit;vertical-align: baseline;box-sizing: border-box;}
:focus {outline: 0;color: #0CA8E5;text-decoration:none;}

html, body {
	font-family:Helvetica,Arial,"PingFang TC","Noto Sans TC","Lantinghei TC",微軟正黑體,微软雅黑,メイリオ,"맑은 고딕",sans-serif;
	font-size: 100%;
	position: relative;
	height: 100%;
	background:#FFF;
}

a{color: #FFF;text-decoration: none;cursor: pointer;
	transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;}

a:hover {color: #E00032;text-decoration: none;}

label{cursor: pointer;}

em, .em{
	font-style: italic;
}

sup{font-size: 70%;}

.hidden {display: none !important;visibility: hidden !important;}

.float-right{float: right;}

/* .spTip{color: #E00032;} */

.spTip a{color: #E00032;border-bottom: solid 1px #E00032}

.nolink{cursor: default;}

.clearfix{
	clear: both;
}

#theme{
	background-size: cover;
	background-attachment: fixed;
}

#mainImage{
	width:100vw;
	height: 100vh;
	background-color: #FFF;
	position: fixed;
	top: 0;
	background: url(../images/b00.png) no-repeat center center;
	background-size: 85% auto;
	background-position:center center;
	box-sizing: content-box;
	transition: all 0.5s ease-out;
}

#mainImage.fade{
	width: 100vw;
	height: 100vh;
	border: 0 solid #FFF;
}


#mainImage .gg{
	position: absolute;
	top: 50%;
	left: 50%;
	animation: load 3s forwards;
	opacity: 0;
	/* transform: translate(-50%,-50%); */
}


#mainImage .gg img{
	/* position: absolute;
	top: 50%;
	left: 50%; */
	/* animation: leftIn 3s forwards; */
	/* opacity: 0; */
	transform: translate(-50%,-50%);
	object-fit: cover;
	height: 95vh;
}

#mainImage .G01{
	animation-delay: 0;
}

#mainImage .G02{
	animation-delay: 1s;
}

#mainImage .G03{
	animation: none;
	opacity: 1;
}

#mainImage .G03 img{
	transform: translate(-100%,-50%);
	animation: leftIn 3s forwards;
	animation-delay: 1s;
	opacity: 0;
}

#mainImage #saleInfo{
	background: rgba(255,255,255,.6);
	box-shadow: 3px 3px 8px #000;
	animation-delay: 5s;
	transform: translate(-50%,-50%);
	width: 100%;
	height: 100%;
}


#mainImage #saleInfo div{
	position: absolute;
	max-width:640px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	border: #AA1E23 solid 8px;
	line-height: 1.5;
	border-radius: 2rem;
	background: rgba(255,255,255,.8);
	color: #333;
	padding: 2rem;
	box-shadow: 0 0 1rem #000;
	text-align: center;
}

#mainImage #saleInfo h3{
	display: inline-block;
	border-bottom: 4px solid #E1B91C;
	color: #000;
	font-size: 1.2rem;
	padding: .1rem 1rem;
	margin: 1rem .5rem;
}

#mainImage #saleInfo span.close{
	background: #269AA4;
	position: absolute;
	top: -21px;
	right: -21px;
	width: 42px;
	height: 42px;
	line-height: 42px;
	font-size: 24px;
	border-radius: 99em;
	text-align: center;
	font-weight: 600;
	color: #FFF;
	cursor: pointer;
}

/* CREDITS TO DESKTOPOGRAPHY FOR IMAGE USED */
.box {
	position: relative;
	height: 100%;
	top: 50%;
	left: 50%;
	perspective: 9999px;
	transform-style: preserve-3d;
	transform: translate(-50%, -50%) rotateX(10deg);
	transition: 2s cubic-bezier(0.2, 0.9, 0.3, 1.3);
	/* Layers */
  }
  .box .layer {
	position: absolute;
	top: 50%;
	left: 50%;
	animation: load 1.4s forwards;
	opacity: 0;
  }

  .box .layer img{
	height: 95vh;
  }

  /* .layer:nth-child(1) {
	transform: translate(-50%, -50%) translateZ(20px);
	animation-delay: 0.2s;
  }

  .layer:nth-child(2) {
	transform: translate(-50%, -50%) translateZ(200px);
	animation-delay: 0.4s;
  }
   */
  /* .layer:nth-child(3) {
	transform: translate(-50%, -50%) translateZ(100px);
	animation-delay: 0.6s;
  }

  .layer:nth-child(4) {
	transform: translate(-50%, -50%) translateZ(200px);
	animation-delay: 0.8s;
  }

  .layer:nth-child(5) {
	transform: translate(-50%, -50%) translateZ(250px);
	animation-delay: 1s;
  }

  .layer:nth-child(6) {
	transform: translate(-50%, -50%) translateZ(300px);
	animation-delay: 1.2s;
  } */

  @keyframes load {
	to {
	  opacity: 1;
	}
  }

  @keyframes leftIn {
	to {
		transform: translate(-50%,-50%);
		opacity: 1;
	}
  }


#wrapper-content{
    max-width: 200%;
    height: auto;
    overflow: hidden;
    margin: 100vh auto 0 ;
    position: relative;
    z-index: 9;
		/*transition: all 0.5s ease-out;*/
    /*-webkit-transition: all 0.5s ease-out;*/
}

#theme > header{
	display: block;
	position: absolute;
	top: calc(100vh + 12rem);
	left: 0;
	width: 100%;
	text-align: left;
	pointer-events: none;
	z-index: 10000;
	transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
}

#theme > header #main-title{
	display: block;
	height: 160px;
	margin-left: 60px;;
	color: transparent;
}

#theme > header #main-title a{
	display: inline-block;
	pointer-events: auto;
}

#wrapper-content header{
	background:rgba(255,255,255,0.9);
	padding: 2rem;
	width: 100%;
	position: relative;
	z-index: 100;
}

/* #wrapper-content #portfolio:before{
	content: "portfolio";
	-webkit-text-stroke: 1px #FF99d9;
  text-stroke: 1px #FF99d9;
  font-weight: 600;
  color: transparent;
  font-size: 20rem;
  position: absolute;
  top: -6rem;
  left: -2rem;
} */

#bio{
	font-size: 1rem;
	line-height: 1.75;
	max-width: 1024px;
	margin: 6rem auto;
}

#bio div{
	text-align:justify;
	text-justify: inter-character;
	-moz-column-count:2; /* Firefox */
	-webkit-column-count:2; /* Safari and Chrome */
	column-count:2;
	-moz-column-gap:5rem; /* Firefox */
	-webkit-column-gap:5rem; /* Safari and Chrome */
	column-gap:5rem;
}

#bio p{
	margin: 0 0 1.5rem 0;
}

#bio .navBtn{
	position: relative;
	margin: 2rem 6rem 0 0;
	float: right;
	z-index: 999;
	border-color: #FFF;
	background: rgba(0,0,0,0.2);
}

#cv {
	width: 100%;
	top: 0;
	right: 0;
	color: #333;
	background: #FFF;
	position: relative;
    z-index: 9999;
    padding: 4em 0;
    overflow: hidden;
    opacity: 0;
	pointer-events: none;
	transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	height: 0;
	font-size: 1rem;
}

#cv ul, #cv li{
	list-style-type:none;
	margin: 4px 4px;
	display: inline-block;
	vertical-align: middle;
	position: relative;
}

#cv ul{
	margin-bottom: 5em;
	text-align: center;
}

#cv a h2{
	position: relative;
	display: block;
	z-index: 1001;
	padding: 4px 0 4px 0;
	margin: 4px 0 4px 0
}

#cv [class^="pType"] a{
	display: inline-block;
	transition:all 0.1s ease-in-out;
	color: #000;
	font-size: 1.5rem;
	line-height: 1;
	padding: 0.5em 1em 0.5em 1em;
	position: relative;
	border: 8px solid;
}

#cv a{
	display: inline-block;
	color: #000;
}

#cv .done:before{
	content: '取消演出';
    width: 32px;
    height: 32px;
    display: block;
    position: absolute;
    z-index: 2;
    background: #000;
    color: #FFF;
    border-radius: 99em;
    padding: 10px;
	top: -10px;
	left: -6px;
	transform: rotateZ(-30deg);
}

#cv .pTypeA a{
	background: #E1B91C;
	border-color: #E1B91C;
}

#cv .pTypeB a{
	background: #CF1E1B;
	border-color: #CF1E1B;
}

#cv .pTypeC a{
	background: #4695A5;
	border-color: #4695A5;
}



#cv a:hover{
	background: #FFF;
	transform: translateY(-6px);
	box-shadow: 3px 3px 8px #666;
}

#cv a h2 .eng{
    font-size: 0.8em;
}



#cv .navBtn{
	position: absolute;
	top: 4rem;
	right: 0;
	z-index: 101;
	font-size: 1rem;
}

#cv #wrapper-hresume {
    max-width: 960px;
    margin: 0 auto;
    position: relative;
}

#cv #ticketBtns{
	background: rgba(255,255,255,0.85);
	position: fixed;
	left: 0;
	bottom: 0;
	text-align: center;
	z-index: 20000;
	padding: 0;
	display: block;
	width: 100%;
}

#cv #ticketBtns a{
	padding: 1rem 2rem;
	float: none;
	background: transparent !important;
}

#cv #ticketBtns a:hover{
	color: #E00032;
	border-color: #E00032;
}

#menuBtn {
	display: inline-block;
	z-index: 99999;
	position: fixed;
	top: 1rem;
	right: 1rem;
}

#menuBtn::after {
	color: #FFF;
    content: '☰';
    transition: all 0.4s ease-in-out;
    display: block;
    width: 48px;
    height: 48px;
    line-height: 48px;
    font-size: 32px;
    font-weight: bolder;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
	border-radius: 50%;
	background: #000;
	box-shadow: 1px 1px 5px #000;
}
#menuBtn.moveDown::after {
	background: #E00032;
}

.openMenu #menuBtn::after {
    content: '✕';
}

#theme.openMenu #cv {
    display: block;
	opacity: 1;
	top: 0;
	pointer-events: auto;
	height: auto;
	overflow: auto;
}

#theme.openMenu #wrapper-content {
	opacity: 0;
	height: 0;
	margin-top: 0;
}

#theme.openMenu > header{
	top: 6rem;
	position: fixed;
}

#theme.openMenu > footer{
	display: none;
}

#program input{
	display: none;
}

.pTypeA{
	border-color: #E1B91C;
}

.pTypeB{
	border-color: #CF1E1B;
}

.pTypeC{
	border-color: #4695A5;
}

#ticket{
	background: #000;
}


.eng{
	font-size: 1em;
	font-weight: normal;
}

.em{
	font-style: italic !important;
}

.thin{
	font-size: 60%;
	letter-spacing: 0;
	line-height: 1;
	color: #CCC;
}

.paddingR{
	padding: 0 !important;
}

#program article{
	color: #FFF;
	width: 100%;
	padding-top: 0;
	padding-bottom: 90vh;
	position: relative;
	text-align: left;
	/* border-bottom: #F00 solid 1px; */
	background: #000;
}

#program article#p01{
	padding-top: 50vh;
}

#program h2{
	display: block;
	position: relative;
	z-index: 99;
	top:-5rem;
	font-size: 3rem;
	padding: 0 0 0 2rem;
	font-weight: bold;
	text-align: left;
	letter-spacing: -3px;
	color: #FFF;
	pointer-events: none;
	text-shadow: 2px 2px 6px rgba(0,0,0,0.8);
}

#program h2 span:first-child + br + span{
	margin: 0 0 0 -0.4em;
}

#program h2 span.eng{
	margin: 0;
}

#program h2 small{
	display: block;
	width: auto;
	padding: 0.5rem 2rem;
	font-size: 1.8rem;
	line-height:2rem;
	text-align:center;
	position: absolute;
	top: -4rem;
	right: 1rem;
	letter-spacing:1px;
	border: 1px solid #FFF;
}

#program h3{
	font-size: 2rem;
	display: none;
	position: absolute;
	z-index: 998;
	right: 0;
	top: calc(100vh);
	font-weight: bold;
	color: #000;
	background: #FFF;
	padding: 1rem 3rem;
}

#program h4{
	display: none;
	position: absolute;
	z-index: 97;
	top:0;
	left: 79%;
	font-size: 1.5rem;
	padding: 0 0 0 1rem;
	border-left-style: solid;
	border-left-width: 3px;
	border-color: inherit;
	font-weight: bold;
	color: #CECECE;
	/* background: #CF1E1B; */
	text-align: left;
}

#program h5{
	font-size: 0.8em;
	padding: 0.5em 0 0 0;
	color: #E00032;
}

#program h6{
	font-size:1.2em;
	background:#E00032;
	display: inline-block;
	padding:6px 12px;
	position: absolute;
	left: -10px;
	top:10px;
	font-weight: 600;
}

.pImg ,.close .pimg{
	top:0;
	left: 0;
	/* display: inline-block; */
	/* display: none; */
	width: 100%;
	height: 100vh;
	vertical-align: top;
	transition: all 0.5s ease-out;
	position: fixed;
	z-index: 2;
	opacity: 0;
	transition: all 1s ease-out;
	pointer-events: none;
	text-align: right;
	overflow: hidden;
}

.pImg img{
	width: 100%;
	height: 100%;
	padding: 0 0 0 240px;
	/* pointer-events: none; */
	border-radius: 0;
	object-fit: cover;
	object-position: center bottom;
}

#p03 .pImg{
	background: #FFF;
}

.here .pImg, .show .pImg{
	opacity: 1;
	transition: all 1s ease-out;
	pointer-events: auto;
}



.pImg::after{
	content: attr(data-credit);
	position: absolute;
	font-size: 10px;
	background: rgba(0,0,0, 0.5);
	color: #AAA;
	bottom:0;
	right:0;
	text-align: left;
	display: inline;
	letter-spacing: 1px;
	padding: 3px 6px;
}


.pInfo{
	font-size: inherit;
	display: block;
	position: relative;
	text-align: left;
	width: 400px;
	z-index: 90;
	height: auto;
	margin: 5em auto 0 2em;
	padding: 20px 20px;
	transition: all 0.5s ease-out;
	background: #FFF;
	color: #FFF;
	border-color: #FFF;
	border-width: 5px;
	border-style: solid;
	opacity: 0.1;
}

.here .pInfo, .show .pInfo{
	border-color: inherit;
	opacity: 1;
}

.pInfo a{
	color: #000;
	display: inline-block;
	text-decoration: none;
}


.pInfo .pVenus{
	/* position: absolute; */
	color: #333;
	font-size: 1.5em;
	/* font-weight: bold; */
	letter-spacing: -1px;
	z-index: 70;
	/* text-shadow: 1px 1px 3px rgba(0,0,0, 0.5); */
}

.pInfo .pVenus .eng{
	font-size: 110%;
	/* font-weight: bold; */
	vertical-align: text-bottom;
}

.pp ul,
.pInfo ul{
	border-color: inherit;
}

.pp ul li,
.pInfo ul li{
	list-style: none;
	font-size: 1.4em;
	line-height: 1;
	margin: 40px 0;
	border-color: inherit;
	border-bottom-style: solid;
	border-bottom-width: 2px;
	color: #000;
}

.pDate{
	letter-spacing: 1px;
	min-width: 50px;
	display: inline-block;
}

.pWeek{
	font-size: 60%;
	display: inline-block;
}

.pTime{
	/* font-size: 1.4em; */
	display: inline-block;
}

.eventA, .eventB, .eventC{
	display: block;
	font-size: 14px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	margin: 0 4px;
	color: #666;
	border: 1px solid #000;
	border-radius: 6px;
	text-align: center;
	transition: all 0.5s ease-out;
	position: relative;
	float: right;
}
.eventC{
display: none !important;
}
.eventA::before{
	content: '談';
}

.eventB::before{
	content: '聆';
}

.eventC::before{
	content: '＋';
}

.eventA:hover::after{
	content: '演後座談';
	position: absolute;
	background: #000;
	border: #000 solid 1px;
	color: #FFF;
	top: -2.2em;
	left: -2px;
	padding: 3px;
	border-radius: 8px;
}

.eventB:hover::before{
	content: '演前導聆';
	position: absolute;
	background: #000;
	border: #000 solid 1px;
	color: #FFF;
	top: -2.2em;
	left: -2px;
	padding: 3px;
	border-radius: 8px;
}

.eventC:hover::after{
	content: '新增至Google行事曆';
	position: absolute;
	background: #000;
	border: #000 solid 1px;
	color: #FFF;
	top: -2em;
	right: -2px;
	padding: 3px;
	border-radius: 8px;
	text-align: center;
}

.btns{
	display: block;
	clear: both;
	margin-top: 20px;
	text-align: left;
}

.btns a{
	color: #E00032;
}

.btns a:hover{
	color: #000;
}


.buy, .more, .moreEng{
	/* border: 1px solid #E00032; */
	font-size: 1em;
	padding: 0.5em;
	vertical-align: text-bottom;
}

.buy{
	border: 1px solid #E00032;
	text-align: center;
	overflow: hidden;
}

.btns .done{
	border: 1px solid #000;
	color: #000 !important;
	background: #ECECEC;
	pointer-events: none;
}


#ticket{
	font-size: 1rem;
	padding: 100px 0;
}

#ticket article{
	max-width: 960px;
	margin: 100px auto;
	padding: 5em;
	background: #FFF;
	position: relative;
	z-index: 19;
}


#ticket article#ticketInfo::before{
	top: -2%;
	left: 1%;
}

#ticket h3{
	display: table;
	font-size: 2em;
	background: #E1B91C;
	padding: 3px 12px;
	position: relative;
}

#ticket h3::after{
	content: '';
	width: 100%;
	height: 100%;;
	display: block;
	border: 2px solid #FFF;
	position: absolute;
	top: -8px;;
	left: -12px;
}

#ticket h4{
	font-size: 1.5em;
	margin: 2em 0 0.5em -12px;
	color: #CF1E1B;
}

#ticket h5{
	font-size: 1.2em;
	margin: 0 0 0.5em 0;
}

#ticket h5.h4{
	font-size: 1.4em;
}

#ticket p{
	margin: 0 0 1.5em 0;
	line-height: 1.75em;
}

#ticket hr{
	margin: 2.5rem 0;
	border-bottom: #FFF solid 2px;
}

#ticket ul{
	padding: 0 0 0 .5rem;
}

#ticket li{
	line-height: 1.5;
	margin: 0 0 .5rem 0;
}

#ticket .eventTip{
	background: #4695A5;
	color: #FFF;
	margin: 3rem 0 0 0;
	padding: 1.5rem;
}

#ticket .eventTip .spTip, #ticket .eventTip .spTip::before{
	color: #FFF;
}

#ticket p.spTip {
	position: relative;
	padding: 0 0 0 1.25em;
	margin: 0;
}

#ticket p.spTip.eng {
	margin: 0 0 0 -1rem;
}

#ticket p.spTip::before {
	content: "※";
	position: absolute;
	top: -2px;
	left: .25em;
	color: #333;
}


footer{background:#000;position: relative;}
footer section{
	position: relative;
	font-size: 1rem;
	max-width: 960px;
	padding: 4rem;
	margin: 0 auto;
	color: #FFF;
}
footer article{
	padding: 2em 0;
	line-height: 28px;
}
footer h4{font-size:15px;line-height: 1.5;margin:0 0 1em 0;text-transform:uppercase;color: #E00032;font-weight: normal;border-bottom: #E00032 1px solid;padding:0 4em 0 0;display: inline-block;}
footer a{font-size:15px;}

footer #signature, footer #allSignature, footer #followUs{float:left;width:33%;}
footer #sponsor{float: left;width:100%;}
footer #sponsor a{pointer-events: none;}
footer #sponsor a img{height: 80px; margin: 0 1rem;}
footer #sponsor .hotel a img{height: 80px; margin: 0 1rem;}
footer #NTT{clear: both;}

footer #copy{font-size:15px;text-align: right;position: absolute;bottom: 4.9rem;right: 0;line-height: 24px}


@media screen and (max-width: 768px) {
	#upbps{
		opacity: 0;
		transition: opacity .5s ease-in-out;
	}
	#upbps div,
	#upbps img{
		animation: none;
	}

	#theme > header #main-title{
		margin: auto;
		text-align: center;
		position: relative;
	}

	#wrapper-content header{
		padding: 120px 0 1rem 0;
	}

	#theme.openMenu > header{
		display: none;
	}

	#theme.openMenu #cv {
		padding-top: 50px;
	}

	#cv .menu a:before{
		width: calc(100vw - 4rem);
	}

	#cv #ticketBtns{
		padding: 1rem 0;
		text-align: center;
	}

	#cv #ticketBtns a{
		font-size: 1rem;
		margin: 0;
	}

	#program article{
		color: #FFF;
		width: 100%;
		padding-top: 2rem;
		padding-bottom: 2rem;
		position: relative;
		text-align: center;
	}

	#program h2{
		position: relative;
		font-size: 2rem;
		line-height: 1;
		letter-spacing: 0;
		text-align: center;
		padding: 0 !important;
	}
	#program h2 span{
		padding: 0 !important;
	}

	#program h2 small{
		width: 80px;
		font-size: 1rem;
		background: rgba(0,0,0, 0.7);
		padding: 0 12px;
		position: relative;
		margin: 0 auto;
		top: -16px;
		left: 0;
	}

	#program h3{
		display: none;
		font-size: 1.5rem;
		position: absolute;
		z-index: 998;
		right: 0;
		top: calc(100vh);
		font-weight: bold;
		color: #000;
		background: #FFF;
		padding: 0.5rem 1.5rem;
	}

	.eng{
		font-size: 1em;
		font-weight: normal;
	}

	#program h2{
		margin-top: 0;
	}

	#program h4{
		display: none;
	}

	#program h6{
		left: -5px;
		top:-5px;
	}

	.spaceFix{
		height: 30vh;
	}

	#program .pInfo{
		display: block;
		position: relative;
		text-align: center;
		margin: 5rem auto;
		padding: 1em;
		width: 400px;
		border-width: 5px;
		border-style: solid;
		background: rgba(255,255,255,0.85)
	}

	#program .pInfo:last-child{
		margin: 5rem auto calc(100vh);
	}

	#program #p13 .pInfo:last-child{
		margin: 5rem auto 10rem;
	}

	#program .pInfo .pVenus{
		position: relative;
		color: #000;
		left: 0;
		top: 0;
		font-size: 1.5em;
		font-weight: bold;
		letter-spacing: -1px;
		z-index: 70;
		padding-top: 1em;
	}

	#program .pInfo .pVenus .eng{
		font-size: 1.1em;
	}

	#program .pImg{
		width: 100%;
		position: fixed;
		z-index: 50;
		pointer-events: none;
	}

	#program .pImg img{
		padding: 0;
		box-shadow: 0 4px 8px #000;
		pointer-events: none;
		width: 100vw;
		height: auto;
		margin: 0;
		border-radius: 0;
		object-fit: fill;
	}

	.btns{
		text-align: center;
	}

	#theme > header{
		position: relative;
	}

	#theme > header img{
		width: 200px;
		height: 100px;
	}

	.col-1{width:20%;}
	.col-2{width:50%;}
	.col-3{width:100%;}
	.col-4{width:100%;}

	#cv{
		padding: 2rem 2rem;
	}

	#cv article {
    width: 100%;
    margin: 0;
    display: block;
	}

	#cv .navBtn {
		top: 0;
	}

	#cv .vcard {
		margin: 0;
		padding: 160px 0 0 0;
	}

	#cv .vcalendar{
		margin: 0;
	}

	#bio{
		margin: 3rem 3rem 6rem 3rem;
		position: relative;
		z-index: 100;
	}

	#bio div{
		text-align:justify;
		text-justify: inter-character;
		-moz-column-count:1; /* Firefox */
		-webkit-column-count:1; /* Safari and Chrome */
		column-count:1;
		-moz-column-gap:0; /* Firefox */
		-webkit-column-gap:0; /* Safari and Chrome */
		column-gap:0;
	}

	#bio p{
		margin: 0 0 1.5rem 0;
	}

	#bio .navBtn {
		margin: 2rem 0 0 0;
		float: none !important;
	}
	#wrapper-content #portfolio {
		padding: 2rem 0;
	}
	.work-item.show{
		width: 320px;
		text-align: left;
	}

	.work-item{
		background: rgba(0,0,0,0.8);
	}

	.work-item.show figcaption{
		background-color: transparent;
		font-size: 1rem;
		opacity: 1;
		width: 320px;
	}

	.work-item figcaption a{
		/*background: rgba(0,0,0,0.8);*/
		padding: 0 0 0 160px;
		margin: 0;
		z-index: 5;
		text-align: center;
	}

	#ticket{
		font-size: 1rem;
		margin: 0;
		padding: 0;
	}

	#ticket article{
		margin: 0;
		padding: 2em;
	}

	#ticket article::before{
		display: none;
	}

	#ticket article#ticketInfo::before{
		top: -2%;
		left: 1%;
	}

	#ticket h3{
		font-size: 1.5em;
		background: #E1B91C;
		padding: 3px 30px 3px 20px;
	}

	#ticket h3::after{
		content: '';
		width: 100%;
		height: 100%;;
		display: block;
		border: 2px solid #000;
		position: absolute;
		top: -8px;;
		left: -12px;
	}

	#ticket h4{
		font-size: 1.2em;
		margin: 2em 0 0.5em -12px;
		color: #CF1E1B;
	}

	#ticket h5{
		font-size: 1.2em;
		margin: 0 0 0.5em 0;
	}

	#ticket p{
		margin: 0 0 1.5em 0;
		line-height: 1.75em;
	}

	footer{
		padding: 2rem;
	}

	#cv:before{
		content: '';
		font-size: 0;
		display: none;
	}

	footer #signature{
		float: left;
	}

	footer #allSignature{
		float: left;
	}

	footer #followUs{
		float: right;
	}

	footer #followUs{float:none;width:100%;}
	footer #sponsor{float: none;width:100%;}
	footer #sponsor a{pointer-events: none;}
	footer #sponsor a img{height: 80px; margin: 1rem;}

	footer #copy{font-size:15px;text-align: left;position: relative;bottom: 0;right: 0;line-height: 24px}
}


@media screen and (max-width: 480px) {
	#mainImage{
		background-image: url(../images/mobile.png);
	}

	.box,
	.gg{
		display: none;
	}

	#program .pInfo{
		display: block;
		position: relative;
		text-align: center;
		margin: 5rem 10px;
		padding: 1em;
		width: auto;
		border-width: 5px;
		border-style: solid;
		background: rgba(255,255,255,0.85)
	}

	#program .pInfo:last-child{
		margin: 5rem 10px 50vh;
	}

	#program #p13 .pInfo:last-child{
		margin: 5rem 10px 10rem;
	}

	footer section{padding: 0}
	footer article {
		padding: 0.6em 0;
		line-height: 28px;
	}
	footer #GreatSouls{
		float: none;
	}
	footer #followUs{
		float: none;
	}

	footer #copy{font-size:15px;text-align: left;position: relative;bottom: 0;right: 0;line-height: 24px}
}


@media screen and (orientation:portrait) {
    #theme:before {
		background: url(../images/mobile.png) no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
}

#ScrollDown {
	position: absolute;
	width: 28px;
	height: 28px;
	text-align: center;
	margin-left: -14px;
	bottom: 60px;
	left: 50%;
	transition: all 1s ease-out;
	z-index:10;
}

#ScrollDown.fade {
	opacity: 0;
}

#ScrollDown span {
	display: block;
	font-size: 12px;
	color: #CF1E1B;
	opacity: .25;
	animation: pulse 2s linear alternate infinite;
	margin-top: 65px;
	margin-left: -9px;
	white-space: nowrap;
}

.chevron {
	position: absolute;
	width: 28px;
	height: 8px;
	opacity: 0;
	transform: scale3d(0.5, 0.5, 0.5);
	animation: move 3s ease-out infinite;
}

.chevron:first-child {
	animation: move 3s ease-out 1s infinite;
}

.chevron:nth-child(2) {
	animation: move 3s ease-out 2s infinite;
}

.chevron:before, .chevron:after {
	content: ' ';
	position: absolute;
	top: 0;
	height: 100%;
	width: 51%;
	background: #CF1E1B;
}

.chevron:before {
	left: 0;
	transform: skew(0deg, 30deg);
}

.chevron:after {
	right: 0;
	width: 50%;
	transform: skew(0deg, -30deg);
}

@keyframes move {
	25% {
		opacity: 1;
	}
	33% {
		opacity: 1;
		transform: translateY(30px);
	}
	67% {
		opacity: 1;
		transform: translateY(40px);
	}
	100% {
		opacity: 0;
		transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
	}
}

@keyframes pulse {
to {
	opacity: 1;
}
}