@font-face {
	font-family:'Lato';
	font-style:normal;
	font-weight:400;
	src:local('Lato Regular'), local('Lato-Regular'), url(../webfonts/lato-regular.woff2) format('woff2');
	unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

@font-face {
	font-family:'Lato';
	font-style:normal;
	font-weight:600;
	src:local('Lato Bold'), local('Lato-Bold'), url(../webfonts/lato-bold.woff2) format('woff2');
	unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

* {
	margin:0;
	padding:0;
}

html, body {
	height:100%;
  color:#585858;
	font-family: 'Lato', sans-serif;
	font-size:16px;
	background-color:#f2f1ee;
}
	
a {text-decoration:none; color:white}

.whtbox {
	overflow:hidden;
	position:relative;
	padding:3%;
	background-color:white;
	border-radius:3px;
}

.whtbox::after {
	position:absolute;
	display:block;
	left:0;
	bottom:0;
	content:"";
	width:100%;
	height:4px;
	background-color:#C13064;
	background:#000;
}

.whtbox_p0 {padding:0 0 3% 0;}
  
.hovzm {transition:transform .1s ease-in-out, box-shadow .1s ease-in-out}
.hovzm:hover {transform:scale(1.05); box-shadow:0 0 20px rgba(0,0,0,0.3); z-index:5}

.rdlink a {
	display:inline-block;
	padding:3px 12px 5px 12px;
	margin:0 8px 8px 0;
	background-color:#a6a6a6;
	border-radius:50px;
	font-size:14px;
}

.rdlink .select {background-color:#585858}

.rdlink .social {
	padding:10px 10px 7px 10px;
	text-align:center;
}

.rdlink .social img {
	height:20px;
	width:20px;
	border-radius:5px;
}

.stantitle {
	display:inline-block;
	width:100%;
	padding-left:15px;
	box-sizing:border-box;
	color:white;
	background-color:#C13064;
	background:#000;
}

.stantitle.back {padding-left:0}

.stantitle a {float:right; border-left:1px solid white;	color:white}
.stantitle.back a {float:left; border:0; border-right:1px solid white}

.stantitle a:hover {background-color:rgba(255,255,255,0.3)}
.stantitle a svg, .stantitle a img {border-radius:2px; fill:transparent; stroke:white}

.bannerapp {
	text-align:center;
	line-height:0;
	background-color:white;
	width:100%;
}

.bannerapp img, .bannerapp a {
	width:100%;
	max-width:950px;
}

.headshow_content {
	overflow:hidden;
	position:relative;
	width:100%;
	height:140px;
	background-size:45%;
	background-position:left 20%;
	background-repeat:no-repeat;
	border-radius:3px;
}

.headshow_content .showskew {
	position:absolute;
	margin-left:42%;
	content:"";
	display:block;
	width:100%;
	height:140px;
	background-color:white;
	transform: skew(-15deg, 0);
}

.headshow_content .showinfo {
	position:absolute;
	padding:20px 20px 20px 0;
	left:41%;
	top:0;
	float:right;
	width:50%;
	height:100%;
}

.headshow_content .logo {
	color:white;
	padding:5px 10px 6px 10px;
	border-radius:5px;
	font-size:20px;
}

.headshow_content .schedule {
	font-size:22px;
	margin:12px 12px 5px 25px;
}

.headshow_content .description {margin-left:23px; overflow:hidden; height:38px}

.headshow_content .showlive {
	position:absolute;
	right:-50px;
	top:50px;
	width:140px;
	line-height:40px;
	text-align:center;
	transform: rotate(-90deg);
	color:white;
	font-weight:600;
}

.footer::before {
	display:block;
	content:"";
	width:100%;
	height:3px;
	background-color:#C13064;
	background:#000;
}

.footer {background-color:white;	text-align:center; color:#E73334}

@media screen and (min-width:960px) {
	
	.bannerwoluwe {
		padding:6px;
		color:white;
		font-size:12px;
		line-height:20px;
		text-align:center;
		background-color:#C13064;
		background:#000;
		border-bottom:1px solid rgba(255,255,255,0.5);
	}

	.bannerwoluwe ul {width:1000px; margin:0 auto}
	.bannerwoluwe li {display:inline-block; margin-left:15px}
	.bannerwoluwe a {color:white}
	.bannerwoluwe a:hover {text-decoration:underline}
	
	header {
		background-color:#C13064;
		background:#000;
  }

	.headerMAX {
		position:absolute;
		z-index:9999999;
		width:100%;
		height:140px;
	}

	.headerMIN {
		position:fixed;
		top:0;
		z-index:9999999;
		width:100%;
		height:65px;
		animation-name:headerfixed;
		animation-duration:0.2s;
	}


	@keyframes headerfixed {
		from { top:-180px }
		to   { top:0px }
	}

	.header_content {
	  position:relative;
	  margin:00 auto;
		max-width:1100px;
	}
	
	.headerMAX .header_content {height:140px}
	.headerMIN .header_content {height:65px}
	
	.header_content h1 {display:inline-block}
	.headerMAX .header_content h1 {height:108px; width:200px; margin:15px 10px}
	.headerMIN .header_content h1 {height:52px; width:90px; margin:6px}

	.header_menu {display:none}

	nav {position:absolute;	bottom:0;	font-size:20px}

	.headerMAX nav {right:0}
	.headerMIN nav {right:115px}

	nav a {
		display:inline-block;
		color:white;
		padding-bottom:15px;
		margin:0 14px 0 10px;
	  text-align:center;
		border-bottom:4px solid transparent;
	}

	nav a:last-child {margin-right:10px}
	nav svg {width:28px; height:25px; stroke:white; stroke-width:1000px; fill:transparent; margin-right:10px; vertical-align:-6px}
	nav a:hover, nav .select {border-bottom:4px solid white}

	.slash {
		display:inline-block;
		height:28px;
		width:1px;
		vertical-align:-7px;
		background-color:white;
	}

	.headerMAX .header_play {position:absolute;	top:25px;	right:0px; height:42px}

	.headerMIN .header_play span {display:none}

	.headerMAX .header_play a {display:inline-block; vertical-align:top; padding:8px 16px 9px 17px; margin:0 10px 0 0; color:#CD3155; border-radius:50px; border:2px solid white; background-color:white}
	.headerMAX .header_play a svg {height:17px;	width:23px; vertical-align:-3px; margin-right:8px; fill:#CD3155; stroke:#CD3155}

	.headerMAX .header_play a:hover {color:white; background-color:transparent}
	.headerMAX .header_play a:hover svg {fill:white; stroke:white}

	.headerMIN .header_play {position:absolute; right:8px; top:12px}
	.headerMIN .header_play a {display:inline-block; padding:8px 10px; margin:0 2px; height:20px; width:18px; background-color:white; border:2px solid transparent; border-radius:50px}
	.headerMIN .header_play a svg {height:16px; width:20px; fill:#CD3155; stroke:#CD3155; vertical-align:-3px;}

	.headerMIN .header_play a:hover {background:transparent; border:2px solid white}
	.headerMIN .header_play a:hover svg {fill:white; stroke:white}

	.container {min-height:100%; padding:140px 1.5% 150px 1.5%; margin:00 auto; max-width:1100px; margin-bottom:-260px;}
	.container::after {clear:both; content: ""; display: block; height:280px}
	
	.stanbox, .leftbox, .rightbox {margin-top:3%}

	.leftbox {float:left; width:65%}
	.rightbox {float:right; width:32%}
	
	.stantitle {font-size:19px; line-height:45px; margin-bottom:15px; border-radius:3px}
	.stantitle a {height:45px; font-size:16px; padding:0 18px 0 18px}
	.stantitle span {font-weight:normal}
	.stantitle a svg, .stantitle a img {height:20px; width:20px; margin-left:8px; vertical-align:-4px}
	.stantitle.back a img {margin:0; margin-right:4px}
	
	.footer_container {
		display:inline-block;
		max-width:1100px;
		padding:20px 0;
	}

	.footer_website {
		display:inline-block;
		width:75%;
		vertical-align:top;
	}

	.footer_logo {
		display:inline-block;
		width:35%;
		padding:18px 2%;
		vertical-align:top;
	}

	.footer_link {
		display:inline-block;
		width:56%;
		padding:18px 2%;
		vertical-align:top;
		text-align:left;
	}

	.footer_info {
		display:block;
		text-align:justify;
		padding:18px 2%;
		color:#585858;
	}

	.footer_partner {
		display:inline-block;
		width:20%;
		padding:18px 2%;
		vertical-align:top;
	}

	.footer_partner img {margin:10px 8px}

}	
	
@media screen and (max-width:959px) {
		
	.bannerwoluwe {display:none}
	
	.bannerapp {
		position:fixed;
		z-index:999999993;
		top:0;
		left:0;
  }
		
	.header_content h1 {
		/*position:fixed;
		z-index:999999992;
		top:17.5vw;
		left:0;*/
		width:100%;
		height:61px;
		background-color:#C13064;
		background:#000;
		text-align: center;
	}
	
	.header_content h1 img {height:48px; width:108px;	margin:6px 8px}
	.header_content .header_menu {position:fixed; z-index:999999993; top:17.5vw; right:0; height:40px; width:40px; margin:10px 10px; cursor:pointer}
	.header_content svg {height:15px; width:20px; margin-right:5px; fill:transparent; stroke:white;}
	
	.touchhide {text-align: center;/*display:none*/}
	
	nav, .header_play {
		/*position:fixed;
		z-index:999999991;
		width:84%;
		padding:8% 8% 0% 8%;*/
	}
	
	nav {height:100%; background:rgba(0,0,0,0.9)}
	.header_play {top:146px; height:100px}
	
	nav a, .header_play a {
		display:inline-block;
		padding:10px 8px;
		font-size:16px;
		/*border-top:1px solid white;*/
	}
	
	nav .select {font-weight:600}
	
	nav a:first-child {/*margin-top:182px;*/}
	nav a:last-child {/*border-bottom:1px solid white*/}
	
	nav img, .header_play svg {
		width:24px;
		height:18px;
		margin-right:10px;
		vertical-align:-6px;
		stroke:white;
		fill:white;
	}
	
	.container {/*margin-top:61px; padding:17vw 2% 60px 2%*/padding:0 2% 60px 2%}
	
	.stanbox, .leftbox {margin-top:3%}
	.rightbox {margin-top:4%}

	.leftbox {display:block}
	.rightbox {display:block}
	
	.stantitle {font-size:18px; line-height:40px; margin-bottom:2%; border-radius:3px;}
	.stantitle span {display:none}
	.stantitle a {height:40px; font-size:16px; padding:0 12px 0 12px}
	.stantitle a svg, .stantitle a img {height:18px; width:18px; vertical-align:-3px}
	.stantitle.back a img {margin:0; margin-right:4px}
	
	.footer_container {padding:25px; text-align:center;}
	
	.footer_logo {
		margin:00 auto;
		display:block;
		width:60%;
		padding:0 0 25px 0;
		max-width:250px;
	}
	
	.footer_link {display:block; padding:0 0 15px 0}	
	.footer_info {display:block; text-align:justify; color:#585858}	
	
	.footer_partner {display:block;	margin:20px 0 0 0}
	.footer_partner img {margin:5px 12px}
	
}

@media screen and (max-width:660px) {
	
	.headshow_content {position:relative; width:100%; height:300px; background-size:100% auto; background-position:top center}
	.headshow_content .showskew {display:none}
	
	.headshow_content .showinfo {
		position:absolute;
		left:0;
		top:150px;
		height:200px;
		width:100%;
		padding:0;
		margin:0;
		background-color:white;		
	}
	
	.headshow_content .schedule {margin:10px 0 0 15px}	
	.headshow_content .logo {display:block; border-radius:0; width:100%}	
	.headshow_content .description {margin:5px 15px; overflow:hidden; height:57px;}
	
	.headshow_content .showlive {
		position:absolute;
		left:10px;
		top:10px;
		width:80px;
		line-height:25px;
		text-align:center;
		font-size:12px;
		transform: rotate(0deg);
		color:white;
	}
	
}