@charset "utf-8";
/* CSS Document */

/* Font */
@font-face {
	font-family: national;
	src: url('../National-Thin.otf');
}


/* Reset Styles
***********************/
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, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
strong {font-weight: bold;}
em {font-style: italic;}

body								{ margin:0 auto; padding:0 auto; font-family: national, Arial, Helvetica, sans-serif;}
#container 							{ width: 80%; max-width: 800px; margin: 0 auto;}
		
p,h1,h3,h4,h5,h6					{ margin:0; padding:0;}
a img								{ border:none;}
a, a:visited  { text-decoration:none; }
.clearit							{ clear:both; margin:0px; padding:0px;}

.w1000								{ width:1000px;}
.w980								{ width:980px;}
.w960								{ width:960px;}
.w940								{ width:940px;}

.w100								{ width:100px;}
.w50								{ width:10px;}

.w750								{ width:750px;}
.w500								{ width:500px;}
.w380								{ width:380px;}
.w300								{ width:300px;}
.w250								{ width:250px;}
.w230								{ width:230px;}
.w180								{ width:190px;}
.w150								{ width:150px;}
.w140								{ width:140px;}
.w125								{ width:125px;}
.h120								{ height:120px;}
.h100								{ height:60px;}

.mt_5								{ margin-top:5px;}
.mt_20								{ margin-top:20px;}
.mt_50								{ margin-top:50px;}
.mt_55								{ margin-top:55px;}

.ml_5								{ margin-left:5px;}
.ml_10								{ margin-left:10px;}
.ml_15								{ margin-left:15px;}
.mr_15								{ margin-right:15px;}
.mr_20								{ margin-right:20px;}
.mr_25								{ margin-right:25px;}
.mr_30								{ margin-right:30px;}
.mr_40								{ margin-right:40px;}
.mr_50								{ margin-right:50px;}
.mb_20								{ margin-bottom:20px;}


.pd_10								{ padding:10px;}
.pd_5								{ padding:5px;}
.pt_20								{ padding-top:20px;}
.pt_15								{ padding-top:13px;}
.pt_10								{ padding-top:10px;}

.bd_d								{ border-right:dotted 3px #666; }
.left								{ float:left;}
.right								{ float:right;}

	
.menu								{}	
.menu a								{ float:right; font-size:15px; text-decoration:none; padding-top:20px; margin:0 32px;  color:#343434; }	
.menu a:hover						{ color:#343434; border-top:solid 6px #00a2ff; padding-top:14px;}
.menu a.selected					{ color:#FFFFFF;}

.menu_bawah							{ width:600px;}	
.menu_bawah a						{ float:right; font-size:15px; text-decoration:none; margin:20px 30px 0 30px; color:#343434; }	
.menu_bawah a:hover					{ color:#343434; border-bottom:solid 6px #e83384; padding-bottom:15px;}
.menu_bawah a.selected				{ color:#343434; border-bottom:solid 6px #e83384; padding-bottom:15px;}


.filosofi							{ background:url(../images/bg_top.jpg) #d7d7d7 top center no-repeat; height:700px; margin-bottom:5px;}
.filosofi h1						{ font-size:62px; color:#343434; font-weight:bold;}
.filosofi h3						{ font-size:24px; color:#343434; margin-top:30px; margin-left:10px;}

.service							{ background:url(../images/yellow_ribbon.jpg) top right no-repeat; height:760px;}
.service a							{ color:#343434; font-size:14px; text-decoration:none; }
.service h1							{ font-size:62px; color:#343434;  font-weight:bold;}
.service h5							{ font-size:18px;}
.service h6							{ font-size:14px; margin-top:40px; line-height:18px;}

.works								{}
.works a							{ color:#343434; font-size:14px; text-decoration:none;}
.works h1							{ font-size:60px; color:#343434;  font-weight:bold; margin-left:40px;}
.works h3							{ font-size:24px; color:#343434; margin-top:10px; margin-left:10px;}
.works h4 a							{ font-size:22px; color:#fff; }
.works h4 a:hover					{ color:#dadf78;}

.contact							{ background:url(../images/pink_ribbon.jpg) top left no-repeat; height:767px;height:760px;}
.contact h1							{ font-size:62px; color:#343434; font-weight:bold; margin-left:5px;}
.contact h3							{ font-size:16px; color:#343434; margin-top:5px; margin-left:10px;}
.contact h2							{ font-size:34px; color:#343434; margin-top:35px; margin-left:10px; font-weight:bold;}
.contact h6							{ font-size:16px; color:#fff; border-radius: 5px;  margin-left:10px; margin-top:5px;
									display:inline-block;
									border:none;
									-webkit-border-radius: 5px; 
									-opera-border-radius: 5px; 
									-moz-border-radius: 5px;
									padding:3px 5px;
									background-color:#e83384;}

.contact h5							{ font-size:16px; color:#fff; border-radius: 5px;  margin-left:10px; margin-top:5px;
									display:inline-block;
									border:none;
									
									padding:3px 10px 0px 0px;}

.copyright							{ font-size:14px; color:#FFF; width:270px; margin-top:28px;}

.round								{border-radius: 70px; 
									display:inline-block;
									border:none;
									-webkit-border-radius: 70px; 
									-opera-border-radius: 70px; 
									-moz-border-radius: 70px;
									padding:55px 0;
									background-color:#FFFFFF;
									}
.round_e							{border-radius: 70px; 
									display:inline-block;
									border:none;
									-webkit-border-radius: 70px; 
									-opera-border-radius: 70px; 
									-moz-border-radius: 70px;
									padding:50px 0;
									background-color:#FFFFFF;
									}
									
/*------------------------------------------------------------------------------------------------------------------css lightbox*/

#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font-size: 14px;
	font-family:"National Thin","sans-serif";
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}
	

/* Min-Width */
.lbWidth { /* most browsers */
	position: absolute;
	top: 0px; left: 0px;
	width: 100%;
	min-width: 790px;
	}

* html .lbContent { /* IE6 */
	margin-left: -790px;
	position:relative;
	}

* html .lbMinWidth { /* IE6 */
	padding-left: 790px;
	}
	
	
/* Clearfix */	
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */ 
	
/*------------------------------------------------------------------------------------------------------------------end css lightbox*/

/*------------------------------------------------------------------------------------------------------------------css gallery*/
.gallery_kiri						{ width:252px; float:left; color:#FFF; }
.gallery_kiri h5					{ display:block; }
.gallery_kiri h5 a					{ color:#343434; font-size:18px; line-height:17px; text-decoration:none; display:block;padding:15px 15px; }
.gallery_kiri h5 a:hover			{ display:block; color:#343434; background:url(../images/bg_arrow.jpg) no-repeat top right;}
.gallery_kiri h5 a.selected			{ display:block; color:#343434; background:url(../images/bg_arrow.jpg) no-repeat top right;}

.bd									{ border-bottom:dashed 1px #333; margin-right:20px; }

.gallery_kiri h2					{ font-size:28px; color:#FFFFFF; line-height:38px; }


.caption							{ background-color:#000; position:absolute; height:35px; width:210px; filter:alpha(opacity=30); opacity: .6; margin-top:125px;}
.caption a							{ color:#FFF; padding:10px; display:block; font-size:14px; text-decoration:none; }

.gallery_kanan						{ width:680px; float:right;background:url(../images/bg_caption_porto.jpg) no-repeat top center; }
.gallery_kanan h2					{ font-size:28px; color:#FFFFFF; line-height:38px; letter-spacing:-0.1px; display:block; border-top: solid 4px #333; padding-top:10px; }
.gallery_kanan h3					{ font-size:20px; color:#CCC; line-height:24px; padding:0 0 20px 10px; }
.gallery_kanan h3 a					{ color:#fff; text-decoration:none;  }
.gallery_kanan h3 a:hover			{ color:#FFCC00; text-decoration:none;  }
.gallery_kanan h5					{ font-size:12px; color:#CCC; line-height:18px; padding-bottom:5px; font-style:italic; color:#999999; }
.gallery_kanan h6					{ font-size:11px; color:#CCC; line-height:21px; border-bottom: 
solid 1px #333; padding-bottom:10px; }
.gallery_kanan span					{ font-size:11px; color:#666; line-height:28px; font-weight:bold; letter-spacing:1px; }
.gallery_kanan p					{ font-size:12px; color:#FFFFFF; line-height:18px; }
.thumb_gallery						{ float:left; width:210px; margin-bottom:25px; }

.menu_bawah_porto					{ width:auto; position:fixed; bottom:0; z-index: 10000; left:0; right:0; border-top:solid 1px #ccc; }	
.menu_bawah_porto a					{ float:right; font-size:15px; text-decoration:none; margin:20px 30px 0 30px; color:#343434; }	
.menu_bawah_porto a:hover			{ color:#343434; border-bottom:solid 6px #b4bd01; padding-bottom:15px;}
.menu_bawah_porto a.selected		{ color:#343434; border-bottom:solid 6px #b4bd01; padding-bottom:15px;}

.porto_caption						{  font-size:42px; padding-top:20px; padding-bottom:50px;}


/*------------------------------------------------------------------------------------------------------------------end css gallery*/		


/*
 * jQuery FlexSlider v1.8
 * http://flex.madebymufffin.com
 *
 * Copyright 2011, Tyler Smith
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */
 
/* Browser Resets */
.flex-container a:active,
.flexslider a:active 				{ outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav 				{ margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider 						{ width: 70%; margin: 0; padding: 0; float:right;}
.flexslider .slides > li 			{ display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img 			{ max-width: 100%; display: block;}
.flex-pauseplay span 				{ text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after 						{ content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides 				{ display: block;} 

* html .slides 						{ height: 1%;}

.slides a 							{ text-decoration:none; color:#ccc; }
.slides a:hover						{ color:#fff;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child 	{ display: block;}


/* FlexSlider Default Theme
*********************************/
.flexslider 						{ position: relative; zoom: 1; }
.flexslider .slides 				{ zoom: 1;}
.flexslider .slides > li 			{ position: relative;}
/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flex-container 					{ zoom: 1; position: relative;}

/* Caption style */
/* IE rgba() hack */
.flex-caption 						{ background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
									  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;}
.flex-caption 						{ padding: 2% 3%; position: absolute; left: 20px; bottom: 15px; background: rgba(0,0,0,.5); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); 
									  font-size: 26px; line-height:34px; text-align:left; font-weight:500;}

/* Direction Nav */
.flex-direction-nav li a 			{ width: 36px; height: 52px; margin: -13px 0 0; background: url(theme/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 35%; 
									  cursor: pointer; font-size:0px; }
					  
.flex-direction-nav li .next 		{ background-position: -68px 0; right: -9px; }
.flex-direction-nav li .prev 		{ left: -8px; }
.flex-direction-nav li .disabled 	{ opacity: .3; filter:alpha(opacity=30); cursor: default;}

/* Control Nav */
.flex-control-nav 					{ width: 100%; position: absolute; bottom: 10px; text-align: right; z-index:102; font-size:1px; }
.flex-control-nav li 				{ margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-nav li:first-child 	{ margin: 0;}
.flex-control-nav li a 				{ width: 13px; height: 13px; display: block; background: url(theme/bg_control_nav.png) no-repeat 0 0; cursor: pointer; text-indent: -9999px;}
.flex-control-nav li a:hover 		{ background-position: 0 -13px;}
.flex-control-nav li a.active 		{ background-position: 0 -26px; cursor: default;}