/* FONT FACE */
@font-face { 
    font-family: 'Opensans'; 
    src: url('/fonts/opensans_semibold.eot'); 
    src: url('/fonts/opensans_semibold?#iefix') format('embedded-opentype'), 
         url('/fonts/opensans_semibold.woff') format('woff'), 
         url('/fonts/opensans_semibold.ttf') format('truetype'), 
         url('/fonts/opensans_semibold.svg#Opensans') format('svg');
    font-weight: 600;
}
@font-face { 
    font-family: 'Opensans'; 
    src: url('/fonts/opensans_bold.eot'); 
    src: url('/fonts/opensans_bold?#iefix') format('embedded-opentype'), 
         url('/fonts/opensans_bold.woff') format('woff'), 
         url('/fonts/opensans_bold.ttf') format('truetype'), 
         url('/fonts/opensans_bold.svg#Opensans') format('svg');
    font-weight: 800;
}

/* RESET */
body, html{
	margin: 0;
	pading: 0;
	width:100%;
	height:100%;
}




/*


PHONE


*/
/* CURTAIN */
	#L_curtain, #R_curtain{ display: none; }     /*CURTAIN*/ 
	#intro{display: block;}                      /*INTRO*/
	#presentation{display: none;}                /* PRESENTATION */
	#dates{display: block;}          			 /* DATE */
	#quote{display: block;}          			 /* QUOTES */
	footer{display: block;}          			 /* FOOTER */

/* INTRO */ 
#intro{
	width:100%;
	min-height: 700px;
	height:99%;
	background: url("/img/Bg_Curtain.jpg") repeat fixed;
	background-size:cover;
	position: relative;
	z-index:10;
}
	#intro img{
		display: block;
		width: 300px;
		margin: 0 auto;
		padding-top: 100px;
	}
	#Intro_quotation{
		width: 90%;
		margin: 50px auto 0;
	}
		#Intro_quotation .quotes{
			margin: 20px 0 0 0;
			padding:0;
		}
			#Intro_quotation .quotes li{
				list-style-type: none;
				display: none;
			}
			#Intro_quotation .quotes li.active{display:block;}
				#Intro_quotation .quotes li img{
					width: 50%;
					padding: 0 0 0 25%;
					margin:0;
				}
				#Intro_quotation .quotes li p{
					font-family: 'Opensans';
					font-weight: 800;
					font-size: 20px;
					text-align: center;
					color: white;
				}
					#Intro_quotation .quotes li p span{
						font-weight: 600;
						font-size: 16px
					}
			#Intro_quotation .dots{
				width: 105px;
				margin: 0 auto;
				height: 10px;
				padding: 30px 0 30px 0;
			}
				#Intro_quotation .dots li{
					width: 15px;
					height: 10px;
					float: left;
					list-style-type: none;
				}
				#Intro_quotation .dots li.active a{background-color: #47a4db}
				#Intro_quotation .dots li a{
					width: 7px;
					height: 7px;
					border-radius: 50%;
					background-color: white;;
					display: block;
				}
	#Intro_buttons{
		width: 301px;
		height: 50px;
		margin: 0 auto;
	}
		#Intro_buttons button, #Intro_buttons a{
			width: 300px;
			height: 48px;
			border: none;
			font-family: 'Opensans';
			font-weight: 800;
			color: white;
			font-size: 20px;
			cursor: pointer;
			text-align: center;
		}
		#Intro_buttons a{
    		background: url('/img/Elem_Btn.png') no-repeat;
    		margin-right: 30px;
    		padding-top: 9px;
    		display: block;
    		text-decoration: none;

    	}
    	#Intro_buttons button{ background: rgba(0, 0, 0, 0) url('/img/Elem_Btn_Outline.png') no-repeat;	}
    	#Intro_explore{display: none;}
	    	#Intro_explore p{
	    		width: 50px;
	    		font-family: 'Opensans';
				font-weight: 600;
				color: white;
				font-size: 14px;
			}
				#Intro_explore img{
					width: 50px;
					padding:0;
				}


/* PRESENTATION */
#presentation{
	width: 100%;
	height: 100%;
	background: url("/img/Bg_Game.jpg") repeat;
	background-size:cover;
	overflow:hidden;
}
	#presentation h1{
		font-family: 'Opensans';
		font-size: 30px;
		color: #47a4db;
		width: 600px;
		margin: 100px auto 0;
		pagging: 0;
		text-align: center;
		text-shadow: 1px 1px 0px black;
	}
	#presentation #YoutubeVideo{
		margin: 50px auto 0;
		width: 640px;
	}
	#presentation li{
		list-style-type: none;
		z-index: 0;
	}
	#presentation a, a#BIG_BUY_Button{
		width: 526px;
		height: 40px;
		background: url("/img/Elem_Btn_Banner.png");
		border: none;
		font-family: 'Opensans';
		font-weight: 800;
		color: white;
		font-size: 20px;
		display: block;
		margin: 50px auto;
		text-align: center;
		text-decoration: none;
		padding-top:10px;
	}


/* DATE */
#dates{
	width:100%;
	height:auto;
	min-height: auto;
	background: url("/img/Bg_Curtain.jpg") repeat fixed;
	background-size:cover;
	overflow: auto;
}
	#dates h1{
		font-family: Impact, 'Opensans';
		font-size: 30px;
		color: #fdce5f;
		width: 90%;
		margin: 0 auto 0;
		padding: 200px 0 0 0;
		text-align: center;
		letter-spacing: 3px;
		word-spacing: 10px;
		line-height: 40px;
	}
	#dates table{
		width: 90%;
		margin: 0 auto;
		height: auto;
		display: block;
		text-align: center;
	}
		#dates table tr{
			width: 100%;
			height: 115px;
		}
			#dates table tr td{
				font-family: 'Opensans';
				font-weight: 800;
				color: white;
				width: 100%;
				text-align: center;
			}
			#dates table tr td.ticket a{
				color: #fdce5f;
				text-decoration: none;
				background: -webkit-radial-gradient(#ffda70, #b48b39);
  				-webkit-background-clip: text;
  				-webkit-text-fill-color: transparent;
			}
	#dates h2{
		font-family: 'Opensans';
		font-weight: 800;
		font-size: 26px;
		text-align: center;
		color: white;
		height: auto;
		margin-top: 80px;
	}
	#dates .button{
		display: block;
		text-decoration: none;
		padding-top:9px;
		width: 300px;
		height: 48px;
		border: none;
		font-family: 'Opensans';
		font-weight: 800;
		color: white;
		font-size: 20px;
		cursor: pointer;
		background: url('/img/Elem_Btn.png') no-repeat;
		margin: 50px 0 150px calc(50% - 150px);
		text-align: center;
	}

/* QUOTES */
#quote{
	width: 100%;
	height: 600px;
	background: url("/img/Bg_Seat.jpg");
	background-size:cover;
}
	#quote h2{
		font-family: 'Opensans';
		font-size: 40px;
		color: #47a4db;
		width: 90%;
		margin: 0 auto;
		padding: 150px 0 0 0;
		text-align: center;
		text-shadow: 1px 1px 0px black;
	}
	#quote a{
		width: 90%;
		height: 41px;
		background-color : #ffd356;
		border: none;
		font-family: 'Opensans';
		font-weight: 800;
		color: white;
		font-size: 20px;
		display: block;
		margin: 100px auto;
		text-align: center;
		text-decoration: none;
		padding-top: 10px;
	}

/* FOOTER */
footer{
	width:100%;
	height: 30%;
	background: url("/img/Bg_Curtain.jpg") repeat fixed;
	background-size:cover;
	position: relative;
	z-index: 100;
	padding-top: 20px;
	min-height: 800px;
	overflow: auto;
}

	footer #presented{
		position: relative;
		width: 90%;
		margin: 20px auto;
		padding-top: 40px;
	}
		footer #presented p{
			font-family: 'Opensans';
			font-weight: 800;
			color: white;
			font-size: 14px;
			letter-spacing: 2px;
			text-align: center;
			margin-bottom: 40px;
		}
		footer #presented a{
			width: 100%;
			display: block;
		}
		footer #presented a img{
			width: 50%;
			margin: 10px 0 10px 25%;
		}

	footer #media{
		position: relative;
		width: 240px;
		margin-top: 50px;
		left: calc(50% - 120px);
	}
		footer #media p{
			font-family: 'Opensans';
			font-weight: 600;
			color: white;
			font-size: 14px;
			letter-spacing: 2px;
			text-align: center;
		}
		footer #media p:nth-child(2){ font-weight: 800; }
		footer #media a{
			font-family: 'Opensans';
			font-weight: 600;
			color: white;
			font-size: 14px;
			letter-spacing: 2px;
			text-align: center;
		}
		footer #media ul{
			width: 93px;
			padding:0;
			margin: 30px auto;
		}
			footer #media ul li{
				float: left;
				list-style-type: none;
				margin: 0 3px;
			}
				footer #media ul li img{width:25px;}
	footer #sponsor{
		display: block;
		position: relative;
		width: 100%;
		margin-top: 150px;
	}
		footer #sponsor p{
			font-family: 'Opensans';
			font-weight: 600;
			color: white;
			font-size: 14px;
			letter-spacing: 2px;
			text-align: center;
			margin-bottom: 40px;
		}
		footer #sponsor a img{
			width: 50%;
			margin: -10px 0 10px 25%;
		}


/*


TABLET


*/
@media screen and (min-width: 768px ){
	#L_curtain, #R_curtain{ display: none; }     /*CURTAIN*/ 
	#intro{display: block;}           			 /*INTRO*/
	#presentation{display: block;}    			 /* PRESENTATION */
	#dates{display: block;}           			 /* DATE */
	#quote{display: block;}           			 /* QUOTES */
	footer{display: block;}           			 /* FOOTER */



	/* INTRO */
	#intro{
		width:100%;
		min-height: 900px;
		height:100%;
		background: url("/img/Bg_Curtain.jpg") repeat fixed;
		background-size:cover;
		position: relative;
		z-index:10;
	}
		#intro img{
			display: block;
			width: 600px;
			margin: 0 auto;
			padding-top: 100px;
		}
		#Intro_quotation{
			width: 400px;
			margin: 50px auto 0;
		}
		#Intro_quotation .quotes li img{
			width: 175px;
			padding: 0 0 0 calc(50% - 87.5px);
			margin:0;
		}
		#Intro_buttons button, #Intro_buttons a{
			width: 300px;
			height: 48px;
			border: none;
			font-family: 'Opensans';
			font-weight: 800;
			color: white;
			font-size: 20px;
			cursor: pointer;
			text-align: center;
			float: left;
		}
		#Intro_buttons a{
    		background: url('/img/Elem_Btn.png') no-repeat;
    		margin-right: 30px;
    		padding-top: 9px;
    		display: block;
    		text-decoration: none;
    	}
    	#Intro_buttons{
			width: 634px;
			height: 50px;
			margin: 0 auto;
		}
		#Intro_explore{
			display: block;
    		position: absolute;
    		bottom: 20px;
    		left: calc( 50% - 25px);
    		cursor: pointer;
    	}
		#Intro_explore p{
	    	width: 50px;
	    	font-family: 'Opensans';
			font-weight: 600;
			color: white;
			font-size: 14px;
		}
		#Intro_explore img{
			width: 50px !important;
			padding:0;
		}

	/* PRESENTATION */
	#presentation{
		min-height: 750px;
	}

	/*DATE*/
	#dates{
		overflow: auto;
		min-height: auto;
	}
	#dates h1{
		font-family: 'Opensans';
		font-weight: 800;
		font-size: 30px;
		color: #fdce5f;
		width: 700px;
		height: auto;
		margin: 0 auto 0;
		padding: 200px 0 0 0;
		text-align: center;
		letter-spacing: 3px;
		word-spacing: 10px;
		line-height: 40px;
	}
	#dates table{
		width: 700px;
		margin: 0 auto;
	}
	#dates table tbody{
		width: 100%;
	}
	#dates table tr{
		width: 100%;
		height: 70px;
	}
	#dates table tr td{
		font-family: 'Opensans';
		font-weight: 800;
		color: white;
		text-align: left;
		height: 50%;
	}
	#dates table tr td.title{
		width: 50%;
		text-align: left;
	}
	#dates table tr td.date{
		width: 29%;
		text-align: left;
	}
	#dates table tr td.ticket{
		width: 19%;
		text-align: right;
		position: relative;
        z-index: 101;
	}

	/* QUOTE */
	#quote h2{
		font-family: 'Opensans';
		font-size: 40px;
		color: #47a4db;
		width: 600px;
		margin: 0 auto;
		padding: 150px 0 0 0;
		text-align: center;
		text-shadow: 1px 1px 0px black;
	}
	#quote a{
		width: 526px;
		height: 41px;
		background: url("/img/Elem_Btn_Banner.png");
		border: none;
		font-family: 'Opensans';
		font-weight: 800;
		color: white;
		font-size: 20px;
		display: block;
		margin: 100px auto;
		text-align: center;
		text-decoration: none;
		padding-top: 10px;
	}

	/* FOOTER */
	footer{
		width:100%;
		height: 30%;
		background: url("/img/Bg_Curtain.jpg") repeat fixed;
		background-size:cover;
		position: relative;
		z-index: 100;
		padding-top: 20px;
		min-height: 40%;
	}
	footer #presented{
		position: absolute;
		bottom: 50px;
		left: 50px;
		width: 300px;
		padding: 0;
		margin: 0;
	}
	footer #presented p{
		font-family: 'Opensans';
		font-weight: 800;
		color: white;
		font-size: 14px;
		letter-spacing: 2px;
		text-align: left;
		margin-bottom: 40px;
	}
	footer #presented a{
		width: auto;
		display: block;
	}
	footer #presented a img{
		width: 125px;
		margin: 0px 20px 0px 0px;
	}
	footer #media{
		position: absolute;
		bottom: 50px;
		width: 240px;
		left: calc(50% - 120px);
		padding: 0; margin: 0;
	}
	footer #media p{
		font-family: 'Opensans';
		font-weight: 600;
		color: white;
		font-size: 14px;
		letter-spacing: 2px;
		text-align: center;
	}
	footer #media p:nth-child(2){ font-weight: 800; }
	footer #media a{
		font-family: 'Opensans';
		font-weight: 600;
		color: white;
		font-size: 14px;
		letter-spacing: 2px;
		text-align: center;
	}
	footer #media ul{
		width: 93px;
		padding:0;
		margin: 30px auto;
	}
	footer #media ul li{
		float: left;
		list-style-type: none;
		margin: 0 3px;
	}
	footer #media ul li img{width:25px;}
	footer #sponsor{
		position: absolute;
		bottom: 50px;
		right: 50px;
		width: auto;
		padding: 0; margin: 0;
	}
	footer #sponsor p{
		font-family: 'Opensans';
		font-weight: 600;
		color: white;
		font-size: 14px;
		letter-spacing: 2px;
		text-align: right;
		margin-bottom: 40px;
	}
	footer #sponsor a{
		width: auto;
	}
	footer #sponsor a img{
		width: 125px;
		margin: 0px 0 0px 0px;
	}
}


/*


COMPUTER


*/
@media screen and (min-width: 992px ){
	#L_curtain, #R_curtain{ display: none; }     /*CURTAIN*/ 
	#intro{display: block;}           			 /*INTRO*/ 
	#presentation{display: block;}    			 /* PRESENTATION */
	#dates{display: block;}           			 /* DATE */
	#quote{display: block;}           			 /* QUOTES */
	footer{display: block;}           			 /* FOOTER */

		/* FOOTER */
	footer{
		width:100%;
		height: 30%;
		background: url("/img/Bg_Curtain.jpg") repeat fixed;
		background-size:cover;
		position: relative;
		z-index: 100;
		padding-top: 20px;
		min-height: 30%;
	}
}




/*


COMPUTER LARGE SCREEN


*/
@media screen and (min-width: 1200px ){
		#R_curtain{
		display: block;
		position: fixed;
		top: 0;
		bottom: 0;
		right:0;
		z-index: 100;
	}
	#L_curtain{
		display: block;
		position: fixed;
		top: 0;
		bottom: 0;
		left:0;
		z-index: 100;
	}
	#intro{display: block;}           			 /*INTRO*/ 
	#presentation{display: block;}    			 /* PRESENTATION */
	#dates{display: block;}           			 /* DATE */
	#quote{display: block;}           			 /* QUOTES */
	footer{display: block;}           			 /* FOOTER */
}