/* RESET
------------------------------------------------------------------------------------*/
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; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline; max-width: 100%;}
.container, iframe { max-width: 100%;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}
html, body	{ height:100%; }
a img,:link img,:visited img { border:none }
:focus { outline: 0; }
a { text-decoration:none; }
table { border-collapse: collapse; border-spacing: 0; }
html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*, *:before, *:after {  -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }
.clearFloat::before, .clearFloat::after { display:table; content:"";}
.clearFloat::after	{ clear:both; }
img	{ max-width: 100%; height: auto; width: auto9; /* ie8 */ }


/* PALETTE
------------------------------------------------------------------------------------*/
body { background: #fff; color: #000; }
h1.siteName, a { color: #999; }
a:hover	{ color: #000; } 
/* color: #b11e4a; cerise >> #730818 >> 740618 >> 80061a
color: #a2c8d5; pale blue /


/* HTML / FONTS
------------------------------------------------------------------------------------*/
body {
	font-family: 'Open Sans Condensed','Source Sans Pro', 'Open Sans', Arial, sans-serif;   
    font-size: 120%; font-weight: 300;
	background-image: none;
	background-size: cover;
    background-position: top right;
    background-repeat: no-repeat;
    background-attachment: fixed; 
	color: #333;
}

h1 {
    margin-top: 10px;
}

.navbar-default .navbar-brand {
}

.navbar-default .navbar-brand span.tagline {}

h1 {}
h2 {}
h3 {}
h4 {font-size: 1.2em; color: #80061a;margin: 20px 0 10px;}


p	{margin-bottom: 20px;}
p::-moz-selection { color: white; background: #4b5e81;}
p::selection { color: white; background: #4b5e81; }

em	{font-style: italic;}

hr {margin: 40px 5% 30px 0px;border: 0;border-top: dotted 1px #ccc; /*#a2c8d5*/}

/* HEADER / NAVIGATION
------------------------------------------------------------------------------------*/
.navbar-wrapper .container	{
	width: 92%;
	margin: 0 auto;	
}
.navbar-brand	{padding-left:0;}
.navbar-wrapper 	{ background-image: url('/wp-content/themes/kleine/images/transp/white40pc.png');margin-bottom: 0px;min-height: 60px;}
.container-fluid	{}
.navbar				{min-height: 50px;margin-bottom: 0;}
.navbar-default		{}
.navbar-static-top	{}

.navbar-header	{ width: 50%;}
.page-home .navbar-header	{ width: 100%;}
.navbar-default  .navbar-brand	{ width: 300px; max-width: 80%}
.navbar-nav	{ float: right;}
.navbar-default .navbar-collapse	{}

.navbar-default{
	background-color: initial;
    border: 0px;
}

.navbar-toggle {
    display: block;
}
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-collapse.collapse.in {
    display: block !important;
}

@media screen and (max-width:768px){
	.navbar-header{margin-right:0px !important;}
	/*.navbar-default  .navbar-brand{font-size:23px !important;font-weight:bold;margin-top:0px;/*width: initial !important;max-width: initial !important;*/}*/
	.navbar-header .navbar-toggle{margin-right:0px !important;}
}

.sectionheadertitle {
    margin-bottom: 20px;
    font-size: 2.5em;
    color: #bbb;
}

.navbar-brand	{font-size:1.4em;}
.navbar-default a.navbar-brand {font-family: 'Bellevue BQ','Open Sans Condensed','Source Sans Pro', 'Open Sans', sans-serif;}
.navbar-default a.navbar-brand {  color: #80061a; /*cerise*/ }
.navbar-default a.navbar-brand:hover	{color: #a2c8d5; /* pale blue*/ text-shadow: 1px 1px 5px white;}

.navbar-default .navbar-toggle	{background-color: transparent; border-color: #80061a; /*cerise*/}
.navbar-default .navbar-toggle .icon-bar	{background-color: #80061a; /*cerise*/}

.navbar-default .navbar-toggle:hover	{border-color: #000;}
.navbar-default .navbar-toggle:hover	{background-color: #000;}

#navbar ul {list-style-type: none;padding: 10px 20px 20px 0;}
#navbar ul li {display: block; width: 100%; text-align: right; font-size: 20px; margin: 0px auto; padding: 10px 0 12px;border-bottom: 1px solid #80061a;background-image: url('/wp-content/themes/kleine/images/transp/black40pc.png');}
#navbar ul li a:hover	{color: #80061a; /*cerise*/ /*text-shadow: 1px 1px 5px white;*/text-decoration: none;}

.home .navbar-default .navbar-toggle	{border-color: #a2c8d5; /* pale blue*/}
.home .navbar-default .navbar-toggle .icon-bar	{background-color: #a2c8d5; /* pale blue*/}

/*--*/
#main-nav   {
    height: 30px; /* set to the height you want your menu to be */
    margin: 15px 0 10px; /* just to give some spacing */
	float: right;
	}
	#main-nav ul    {
		margin: 0; padding: 0; /* only needed if you have not done a CSS reset */
	}
	#main-nav li    {
		display: block;
		float: left;
		/*line-height: 30px;
		height: 30px;*/ /* this should be the same as your #main-nav height */
		margin: 0; padding: 0; /* only needed if you don't have a reset */
		position: relative; /* this is needed in order to position sub menus */
	}
	#main-nav li a  {
		display: block;
		/*height: 30px;*/
		line-height: 30px;
		padding: 0 15px;
	}
	#main-nav .current-menu-item a, #main-nav .current_page_item a, #main-nav a:hover {
		color: #80061a;
		/*text-shadow: 1px 1px 5px black;*/
		text-decoration:none;
	}
	#main-nav ul ul { /* this targets all sub menus */
    display: none; /* hide all sub menus from view */
    position: absolute;
    top: 30px; /* this should be the same height as the top level menu -- height + padding + borders */
    right: 40px;
	}
	#main-nav ul ul li { /* this targets all submenu items */
		float: none; /* overwriting our float up above */
		width: 250px; /* set to the width you want your sub menus to be. This needs to match the value we set below */
		/*white-space: nowrap;*/
	}
	#main-nav ul ul li a { /* target all sub menu item links */
		padding: 5px 10px; /* give our sub menu links a nice button feel */
	}
	#main-nav ul li:hover > ul {
		display: block; /* show sub menus when hovering over a parent */
	}
	#main-nav ul ul li ul {
    /* target all second, third, and deeper level sub menus */
    left: 90px; /* this needs to match the sub menu width set above -- width + padding + borders */
    top: 0; /* this ensures the sub menu starts in line with its parent item */
}
.single .navbar-toggle, .archive .navbar-toggle, .page .navbar-toggle{display:none;}
.home .navbar-toggle{display:block;}
.home  #main-nav{display:none;}
/*.home .header_top_menu .navbar-nav{width:400px;}
.home .header_top_menu .navbar-nav li ul{display:none;}
.home .header_top_menu .navbar-nav  li:hover > ul {display: block;}
.home .header_top_menu .sub-menu li{border-bottom: 0px !important;}*/

.header_top_menu .navbar-nav{width:400px;}
.header_top_menu .navbar-nav li ul{display:none;}
.header_top_menu .navbar-nav  li:hover > ul {display: block;}
.header_top_menu .sub-menu li{border-bottom: 0px !important;}

@media only screen and (min-width: 769px) {
.not_home_menu .sub-menu{}
.not_home_menu .sub-menu li{background: #80061a;/*padding-top:10px !important;padding-bottom:10px !important;*/padding-top:7px !important;padding-bottom:7px !important;}
.not_home_menu .sub-menu li a{color:#fff;}
.not_home_menu ul ul li a {padding: 0px 10px !important;text-decoration:none;text-align:right;}
.not_home_menu .sub-menu li a:hover {color: #a2c8d5 !important;}
#main-nav ul li:hover > ul {display: inline-table;}
#main-nav  .sub-menu > li:hover {background:#a04050;}
#main-nav ul ul li { width: 108px;}
#main-nav ul ul li ul {left: -300px;}
#main-nav ul ul li .level-3 li{ width: 300px;}
#main-nav ul ul li .level-3 li.menu_thumb{padding-top: 0px !important;padding-bottom:0px !important;}
#main-nav ul ul li .level-3 li.menu_thumb a{padding-right: 0px !important;}
#main-nav .sub-menu .current-menu-item a{color:#fff;}
}

@media only screen and (max-width: 768px) {
	.ann_mobile_top_nav{position: fixed;left: 0px;right: 0px;background-color: #fff;}
	.page-home .ann_mobile_top_nav{background-color:#000;}
	.ann_container_fluid{padding-left:0px !important;padding-right:0px !important;}
	.navbar-header	{width: 100%;}
	.anntop_navbar_header{margin-left:0px !important;}
	.navbar-toggle {margin-right:0px;}
	.single .navbar-toggle, .archive .navbar-toggle, .page .navbar-toggle{display:block;}
	#main-nav{display:none;}
	/*.home .navbar-nav{width:100%;}
	.home .header_top_menu{position: fixed;width: 100%;left: 0px;right: 0px;margin: 0px;padding: 0px;}
	.home .header_top_menu .navbar-nav{padding:0px !important;margin:0px;width:100%;}*/
	.navbar-nav{width:100%;}
	.header_top_menu{position: fixed;width: 100%;left: 0px;right: 0px;margin: 0px !important;padding: 0px!important;}
	.header_top_menu .navbar-nav{padding:0px !important;margin:0px;width:100%;}
	.menu_bg_on ul li{background:#000;opacity:.9;}
	#navbar ul.sub-menu{padding:10px 20px 0px 0px !important;}
}

div.social	{bottom: 0; position: relative; text-align: center;padding: 20px;margin-top: 20px;border-top: 1px dotted #eee;font-family: 'Bellevue BQ','Open Sans Condensed','Source Sans Pro', 'Open Sans', sans-serif;}

.mainContent {
	min-height: calc(100% - 230px);
}
/* HOME
------------------------------------------------------------------------------------*/
body.home	{
/*background-image:url('/wp-content/themes/kleine/images/home-BG-Nenang 2560 x 1440.jpg'); */
background-image:url('/wp-content/uploads/2024/11/home-BG-Crimson_2560_x_1440.jpg');
background-color: #000;}

.home .navbar-wrapper 	{ background-image: url('/wp-content/themes/kleine/images/transp/black40pc.png'); height: 60px;}
.home .navbar-default a.navbar-brand { color: #a2c8d5; /* pale blue*/}
.home .navbar-default a.navbar-brand:hover	{color: #80061a; /*cerise*/ text-shadow: 1px 1px 5px black;}

.home .navbar-default .navbar-toggle:hover	{border-color: #80061a;  /*cerise*/}
.home .navbar-default .navbar-toggle:hover	{background-color: #80061a;  /*cerise*/}
.home #navbar ul li a:hover	{color: #80061a; /*cerise*/ text-shadow: 1px 1px 5px black;}
.home li#menu-item-181 ul.sub-menu	{display: none;}

/* ABOUT
------------------------------------------------------------------------------------*/

/* PROJECTS
------------------------------------------------------------------------------------*/

.anntitle{margin: 10px 0px 20px;font-weight: bold;font-size: 1.6em;}
.sub_project_item{height: 267px;background-repeat: no-repeat;float: left;/*margin-right: 10px;margin-bottom: 10px;*/}
.annsub_title{font-size: 1.6em;font-weight: bold;}
.sub_project_wrapper{padding-left:0px;}

.sub_project_list{float:left;position: relative;display: inline-block;margin-right: 10px;margin-bottom: 10px;}
.sub_project_item_overlay{position: absolute;left: 0;right: 0;top: 0;bottom: 0;opacity: 0;background-color: rgba(70, 70, 74, 0.5);}
.sub_project_item_content{display: table;height: 100%;width: 100%;text-decoration: none;}
.sub_project_item_content a{display: table-cell;vertical-align: middle;text-align: center;text-decoration: none;color:#fff;font-weight:bold;}
.sub_project_list:hover .sub_project_item_overlay{opacity: 1;transition-duration: .1s;transition-timing-function: linear;color:#fff;font-weight:bold;}
.project_thumb_item{padding-bottom:15px;padding-right:0px; text-align:center;padding-left: 7px;}
.project_thumb_img_item{cursor:pointer;}
.anncol-md-8{width:12.5%;padding-left:15px;float:left;}
.ann_menu_hide{display:none;}
.anncustom_menu{position: relative;float: right;padding: 9px 0px;margin-top: 8px;margin-bottom:8px;}
.anncustom_menu ul{list-style-type: none;list-style-image: none; list-style: none;}
.anncustom_menu ul li{display: inline;padding:0px 20px;}
.anncustom_menu ul li a{text-decoration:none;}
.anncustom_smenu{display: none;}

.projectDescription	{width: 95%; margin: 20px 0 30px;}
iframe {display: block;margin-top: 20px;}

@media screen and (min-width: 768px) and (max-width:990px){
.sub_project_item {width: 100% !important;height: 100%;}
.project_thumb_item{width:50%;float:left;padding-left: 0px;padding-right: 0px;}
.right_space{padding-right:10px;}
.left_space{padding-left:10px;}
.ann_menu_hide{display:block;}
}

@media only screen and (max-width: 768px){
.sub_project_item {width: 100% !important;height: 100%;}
.project_thumb_item{width:50%;float:left;padding-left: 0px;padding-right: 0px;}
.right_space{padding-right:10px;}
.left_space{padding-left:10px;}
.ann_menu_hide{display:block;}
}
@media only screen and (min-width: 768px){
.jcarousel img
{
max-height:	550px;
}
}

/* EVENTS
------------------------------------------------------------------------------------*/
/*.eventData	{display: none;}*/
.upcomingEvent	{ border-bottom: dotted 1px #a2c8d5; margin-bottom: 20px;padding-bottom: 10px;}
.eventData, .eventDescription	{margin-left: 12px;}
p.dateDescription	{color: #000; text-transform: uppercase;margin-bottom: 2px;}
.post-type-archive-events ul	{list-style: none;}
.post-type-archive-events ul li a	{color: #000;}
.post-type-archive-events ul li a:hover	{color: #80061a;}


/* CONTACT
------------------------------------------------------------------------------------*/


/* PAGINATION
------------------------------------------------------------------------------------*/

/* COMMENTS
------------------------------------------------------------------------------------*/

/* FONTS
------------------------------------------------------------------------------------*/

@font-face {
	font-family: 'Bellevue BQ';
	src: url('/wp-content/themes/kleine/fonts/BellevueBQ/BellevueBQ.eot');
	src: url('/wp-content/themes/kleine/fonts/BellevueBQ/BellevueBQ.eot?#iefix') format('embedded-opentype'),
		url('/wp-content/themes/kleine/fonts/BellevueBQ/BellevueBQ.woff') format('woff'),
		url('/wp-content/themes/kleine/fonts/BellevueBQ/BellevueBQ.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}

@media only screen and (min-width: 990px){
.project_thumb_item  img{
	height:auto;
}
.postid-353	.project_thumb_item  img{
	height:auto;
}
}
@media screen and (min-width: 768px) and (max-width:990px){
	.project_thumb_item  img{
	height:auto;
}
}
@media screen and (min-width: 640px) and (max-width:768px){
.project_thumb_item  img{
	height:auto;
}
}
@media screen and (min-width: 540px) and (max-width:640px){
.project_thumb_item  img{
	height:auto;
}
}
@media screen and (min-width: 420px) and (max-width: 539px){
.project_thumb_item  img{
	height:auto;
}
}
@media only screen and (max-width: 420px){
.project_thumb_item
{
	width: 100%;
	float:left;padding-left: 0px;padding-right: 0px;
}
.project_thumb_item  img{
	height:auto;
	padding-left: 0px;
}
.right_space
{
padding-right: 0px; 
}
}

h2.widgettitle	{
	margin-bottom: 10px;	
}

.home h2.widgettitle	{
	color: #a2c8d5;
}
	
p.credit	{
	display: none;
	font-family: 'Open Sans Condensed','Source Sans Pro', 'Open Sans', Arial, sans-serif;
	margin-top: 20px;
	font-size: .9em;
}
.page-contact p.credit {display:block;}

span.social-icon {
	background-color: #80061a !important;
}

/* don't update the plugin or it will break. Only option to change icons colors is the above rule.

span.social-icon.socicon-instagram data-hover-color {
	background-color: #80061a !important;
}

span.social-icon.socicon-facebook data-hover-color {
	background-color: #3b5998 !important;
}*/