/*
Theme Name: Matah Ati v2 Responsive
Theme URI: http://matah-ati.com/
Description: Second theme of Matah Ati with responsive layout
Author: Rio Purnomo
Author URI: http://siriokun.com/
*/

/*
Description: Revision
Date: August 2012
Author: Luqman Marzuki of Subtube Studio
Author URI: http://subtube.com/
*/

@import url('css/grid-16-940.css');

body { font-family:"Times New Roman", Times, serif; font-size:14px; margin:0; background-color:#000; }

@font-face {
	font-family: 'RotisSemiSerifStd55Regular';
	src: url('fonts/rotissemiserifstd-webfont.eot');
	src: url('fonts/rotissemiserifstd-webfont.eot?#iefix') format('embedded-opentype'), 
		url('fonts/rotissemiserifstd-webfont.woff') format('woff'), 
		url('fonts/rotissemiserifstd-webfont.ttf') format('truetype'), 
		url('fonts/rotissemiserifstd-webfont.svg#RotisSemiSerifStd55Regular') format('svg');
	font-display: swap;
	font-display: swap;
	font-display: swap;
	font-display: swap;
}
@font-face {
	font-family: 'RotisSansSerifStd';
	src: url('fonts/rotissansserifstd.eot');
	src: url('fonts/rotissansserifstd.eot?#iefix') format('embedded-opentype'), 
		url('fonts/rotissansserifstd.woff') format('woff'), 
		url('fonts/rotissansserifstd.ttf') format('truetype'), 
		url('fonts/rotissansserifstd.svg#RotisSansSerifStd') format('svg');
	font-display: swap;
	font-display: swap;
	font-display: swap;
	font-display: swap;
}
@font-face {
	font-family: 'RotisSansSerifStd';
	src: url('fonts/rotissansserifstd-extrabold.eot');
	src: url('fonts/rotissansserifstd-extrabold.eot?#iefix') format('embedded-opentype'), 
		url('fonts/rotissansserifstd-extrabold.woff') format('woff'), 
		url('fonts/rotissansserifstd-extrabold.ttf') format('truetype'), 
		url('fonts/rotissansserifstd-extrabold.svg#RotisSansSerifStd') format('svg');
	font-weight: bold; 
	font-display: swap;
	font-display: swap;
	font-display: swap;
	font-display: swap;
}

a { color:#000; text-decoration:none }
img { border:0 }
h1, h2, h3, h4, h5 { font-size:14px }
.red{color:red;}
sup{line-height:0;}

#top, #middle { background-color:#fff; width:100%; margin:0 auto; }

/* header */

#top { font-family: "RotisSemiSerifStd55Regular"; height:190px; z-index:100; margin-top:-20px !important; padding-top:50px; overflow:hidden; }

.logo { margin:30px; position:absolute; top:-20px; left:-170px; z-index:101 }
.qtrans_language_chooser { float:right; margin:0 -150px 0 0; padding:0; position:relative; top:20px; }
.qtrans_language_chooser li { display:inline-block; list-style:none; padding:0 10px }
.qtrans_language_chooser .active span { border-bottom:1px dashed #333 }
.qtrans_language_chooser li:first-child { border-right:1px solid #333 }
.tagline { margin-right:30px; text-align:right; text-transform:none; }
#header { margin:0 auto; padding:0; width:700px; position:relative; text-transform:lowercase; left:-8px; z-index:999; }
.menu { border-top:1px solid #333; clear:both; padding:0 }
.menu ul { margin:0; padding:0 }
.menu li { float:left; list-style:none; border-right:1px solid #333; margin:0; height:15px; position:relative; left:8px; }
.menu li:last-child { border:0 }
.menu a { display:block; padding:10px 25px 0; }
.menu li ul { display: none; position: absolute; left: 0; padding:0; margin:0; }
.menu li:hover > ul { display: block; }
.menu li ul li a { width: 100px; display: block; }

/*sub submenu*/
.menu li ul li ul { display: none; }
.menu li ul li:hover ul { left:100%; top:0; }
.menu .sub-menu { display:none; float:left; padding-top:5px; position:absolute; top:25px; left:1px; }
.menu .sub-menu .sub-menu {padding-top:10px; width:450px }
.menu .sub-menu .sub-menu li { padding-left:10px }
.sub-menu li { border:0!important; height:auto; padding-top:5px; vertical-align:top }
.sub-menu a { background:#000; color:#fff; display:block; padding:2px 15px; white-space:nowrap; }
.sub-menu li li, .sub-menu li li a { display:inline-block; float:left}
.sub-menu li li {position:relative; left:0; top:-10px; }
.sub-menu ul.sub-menu li a { background:none; color:#333; width:175px }
.sub-menu ul.sub-menu .short a { width:90px }
.sub-menu li li a:hover { background:url(images/bg-nav.png); }
.clear{clear:both;}

/* slides */
#slides { color:#808080; width:100%; z-index:1; overflow:hidden; line-height:0 }
#slides img { width:100%; /*height:100%*/ }
.slides-gallery{background:url(images/loading.png) center center no-repeat;height:100%;}
.bx-prev, .bx-next { background:url(images/slider-navs.png) right 0 no-repeat; height:20px; width:20px; overflow:hidden; text-indent:-100px; position:absolute; top:50%; right:3%; z-index:101; opacity:.5; }
.bx-prev { background-position:0 0; right:auto; left:3% }
.bx-prev:hover, .bx-next:hover{ opacity:1; }

/* Front page */
.slides-front-wrapper { margin-top:-220px; }
/* Merchandise */
.merc .bx-prev, .merc .bx-next { background-position:right bottom; }
.merc .bx-prev { background-position:left bottom; }
.slides-merc{ margin:0;padding:0}
.slides-merc li{position:relative}
.slides-merc a{ display:block;position:absolute; top:10%; left:11%; height:82%; width:15%;}
.slides-merc a:hover{background:url(images/icon-eye.png) center center no-repeat;}

/* touch */
/*
#content{position:relative;top:45px; left:0;}
#content>div {
	position:absolute; z-index:1;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	padding:0;
  	width:650px;
}
*/
.selectnav, .display{display:none}

/* content */
#content { }
.flex { background: url(images/bg.png) center 0 repeat-y; height:100%; width:100%; overflow:hidden; position:absolute; top:0; z-index:1 }
.flextatic { height:100%; width:100%; overflow:hidden; position:relative; top:0; z-index:1; margin-top:-220px; padding:200px 0 20px 0; }
.flextatic:after{
  content: "";
  background:url("images/bg.png") repeat-y scroll center 0 transparent !important;
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}
#content, #discontent { font-family: "RotisSemiSerifStd55Regular"; color:#000; margin:0 auto; line-height:14pt; width:960px; overflow:auto; }
#content hr { border:0; border-top:1px solid #ccc; float:left; margin:0 100% 1em 0; width:200px }
img.aligncenter { display:block; margin:0 auto }
img.alignleft { float:left; margin:0 30px 15px 0 }
img.alignright { float:right; margin:0 0 15px 30px }
.thumbs { margin-left:-30px; width:800px }
.thumbs img { margin:0 0 20px 30px; cursor:pointer; }

/* Casts */
#casts { height:300px; overflow:hidden; }

/* footer */
.foot { background-color:#fff; width:100%; z-index:100; text-align:center; color:#3c3c3c; font-size:14px; font-family: 'RotisSemiSerifStd55Regular'; padding-top:10px; position:relative; }
.foot p { font-family: Arial, sans-serif; margin:0 auto; padding:35px 0 0; width:980px }
.foot-social { color:#f00; float:right; font-style:normal; margin-top:-21px; text-align:right; width:580px }
.foot-social strong{ color:#333; display:block; float:left;line-height:16px}
.foot .grey { color:#8c8c8c; }
.foot .links { margin:15px 0; vertical-align:middle; color:#b10000; font-weight:bold; }
.foot .links a { display: block; float:left; margin-left:15px; }

.foot .links .text { margin-top:15px; display: block; float:left; }
.foot .links .fb { margin-top:3px; }
.foot .links .twitter { margin-top:3px; }

#footer-wrapper { width:676px; height:144px; margin:20px auto 0; }

/* Page Upcoming solo */
#solo-media-partner { width:1138px; margin:80px auto 0; background:url(./images/matahati-solo-media-partner.jpg) no-repeat; height:228px; }

/* custom content */
.page-id-250 #content ul { padding-left:15px; }
.page-id-250 #content .font-size-up { font-size:15px; font-weight:bold; }
.page-id-250 #content p.no-margin { margin-bottom:0; }
.page-id-250 #content ul.no-margin { margin-top:0; }
.page-id-250 #content { font-family: 'RotisSansSerifStd'; color:#3c3c3c !important; }

/* coverage */
#play{display:none; cursor:pointer;}
.coverage>#discontent{width:558px;overflow:hidden;}
.coverage>#discontent a{ display:inline; float:left; margin:10px;}
.fancybox-wrap{background:#fff;z-index:102; box-shadow:10px 5px 15px rgba(0,0,0,.5);}
.fancybox-wrap img{height:auto; width:100%}
.fancybox-skin{ border:1px solid #ccc;margin-bottom:30px;}
#fancybox-loading{ margin:120px auto 0; background:url(images/loading.gif) 0 0 no-repeat; height:32px; width:32px; position:relative; z-index:105; opacity:.5}
#fancybox-overlay{background:#fff; height:100%; width:100%; position:fixed; left:0; top:0; z-index:101; opacity:.7;cursor:pointer;}
.fancybox-close,.fancybox-prev,.fancybox-next{ background:url(images/slider-close.png) 0 0 no-repeat; cursor:pointer; height:21px; width:21px; position:absolute; right:15px; bottom:5px}
.fancybox-prev,.fancybox-next {
background-image:url(images/slider-nav.jpg);
	position:absolute;left:15px;right:auto;
}
.fancybox-next{left:35px;background-position:-25px 0;}
.overlay-dark, .overlay-dark #discontent{padding:0; height:auto; width:633px}
.overlay-dark{background:none;position:relative;z-index:103; margin:0 auto;}
.video-player{background:none; margin-bottom:40px;}
.video-player #discontent{ padding:0; height:auto;width:633px}

/* merchandise */
#item1,#item2,#item3{display:none; position:absolute; top:0; left:0; height:100%; width:100%; z-index:102;}
.box{overflow:hidden;}
.box img{float:left;margin:0 15px 10px 0;width:auto}
.upcoming{position:absolute; top:-44px; z-index:999; right:-290px; }
#seat1, #seat2, #seat3{display:none; text-align:center;}
.fancybox-title{text-align:center;width:100%!important;}
.child a{color:red;}
.up{background: url(images/bg.jpg) center 0 repeat-y;}
.col2,.col3{display:inline-block; width:25%; vertical-align:top;}
.col2{ margin:0 25px;width:40%}
.hr{border-top:1px solid #ccc; margin:20px 0;}
.col3 .red{float:right; margin-bottom:15px;}

/* details */
.sub-menu ul.sub-menu .uppercase a{text-transform:none;}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-button:start:decrement{display:block;height:0;right:20px}
::-webkit-scrollbar-button:end:increment{display:block;height:0;right:20px}
::-webkit-scrollbar-button:vertical:increment{background:#222}
::-webkit-scrollbar-track-piece{background-color:#ddd}
::-webkit-scrollbar-thumb:vertical{height:43px;background-color:#000;border:1px solid #333}
::-webkit-scrollbar-thumb:horizontal{width:30px;background-color:#000;border:1px solid #333}
::-webkit-scrollbar-thumb:vertical:active{border-width:1px 2px 1px 2px}
::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-thumb:horizontal:hover{background-color:#000}
::selection,::-moz-selection {background:#333; color:#fff;}

@media only screen and (min-width:100px) and (max-width:719px) {
		#top, #middle, .foot { background-color:#fff; width:100%; margin:0 auto; }
		#header { width:100%; }
		.video-player #discontent, .bx-wrapper, .bx-window{width:auto}
		#content{ padding:0 25px; width:auto}
		.suffix_1, .suffix_2 { padding-right:10px; }
		#content>div{width:100%}
		#content img, #discontent img{max-width:100%; display:block; margin:0 auto; width:80%;}
		.coverage>#discontent, #content>div, .thumbs { width: auto }
		.coverage>#discontent{padding:15px; height:auto}
		#casts .item{padding:0 30px 30px 0}
		.thumbs{margin:0}
		.thumbs img{margin:0 0 1px 1px; width:50px}
		.col2, .col3 { display:block; margin: 0; width: auto }
		.col3 .red{float:none}
		.slides-gallery{background-position:center 25%}
		.tagline{margin-left:30px; margin-right:120px; text-align:left}
		.logo{ margin:30px 30px 0;position:inherit}
		.upcoming{ right:-35px; top:-30px; }
		.upcoming img{ width:71%; }
		.qtrans_language_chooser{ position:absolute; float:none; margin:20px; top:-35px; left:0}
		.menu li{height:35px}
		#footer-wrapper { width:auto; margin:0; height:35px; }
		#footer-wrapper .hide-small{display:none}
		.selectnav{display:block; margin:0 30px; padding:5px; width:90%}
		#menu-navigation, #play{display:none!important}
		iframe{width:100%}
		.display{display:block}
		.fancybox-skin{margin-bottom:40px}
		.fancybox-close, .fancybox-prev, .fancybox-next{ background-size:cover;height:30px; width:30px}
		.fancybox-next{left:50px; background-position:-48px 0}
		/* Pages */
		#solo-media-partner { width:494px; margin:40px auto 0; background:url(./images/matahati-solo-media-partner-494.jpg) no-repeat; height:363px; }
		.slides-front-wrapper { margin-top:0px !important; }
		/* Helper */
		.hide-on-small { display:none; }
		
}
@media only screen and (min-width:720px) and (max-width:1024px) {
		#top, #middle, .foot { background-color:#fff; width:100%; margin:0 auto; }
		.container_16 .suffix_1 { padding-right: 15px;}
		#header { }
		#content{ width:650px; }
		#content>div{width:auto}
		.logo{ margin:30px 30px 0;position:inherit}
		.upcoming{ right:-100px; top:-30px; }
		.upcoming img{ width:80%; }
		.tagline{margin-left:30px; margin-right:120px; text-align:left}
		.qtrans_language_chooser{ position:absolute; float:none; margin:20px; top:-35px; left:0}
		.foot p{margin:0 15px;width:auto}
		.video-player #discontent{margin-top:40px}
		.selectnav{display:block; margin:0 30px; padding:5px; width:90%}
		#menu-navigation{display:none!important}
		.fancybox-skin{margin-bottom:40px}
		.fancybox-close, .fancybox-prev, .fancybox-next{ background-size:cover;height:30px; width:30px}
		.fancybox-next{left:50px; background-position:-48px 0}
		/* Pages */
		#solo-media-partner { width:650px; margin:80px auto 0; background:url(./images/matahati-solo-media-partner-650.jpg) no-repeat; height:326px; }
		.slides-front-wrapper { margin-top:0px !important; }
		/* Helper */
		.hide-on-small { display:none; }
		
}