/* font */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:100,300,400);

/* root */

:root			{--font:'Open Sans',sans-serif,verdana,arial; --font-size:11pt; --font-size-sml:0.8rem; --font-size-med:1.2rem; --font-size-lrg:1.8rem; --font-lig:100; --font-med:300; --font-bol:400; --white:rgba(255,255,255,1.0); --white-med:rgba(255,255,255,0.6); --white-lig:rgba(255,255,255,0.2); --black:rgba(0,0,0,1.0); --black-med:rgba(0,0,0,0.6); --black-lig:rgba(0,0,0,0.2); --color:rgba(25,90,120,1.0); --color-med:rgba(25,90,120,0.6); --color-lig:rgba(25,90,120,0.2); --border:solid 1px rgba(0,0,0,0.2); --border-radius:3px; --view-hgt:50vh}

/* html */

html *			{font-family:var(--font); font-weight:var(--font-med); font-size:var(--font-size)}

/* main */

body			{color:var(--black-med); background:var(--black-lig); margin:0px; overflow-y:scroll; top:0px  !important} /* top for translate */
b				{color:var(--color); font-size:var(--font-size)}
p				{margin:0px; padding:0px; text-align:center}
form 			{margin:0px; padding:0px; display:inline}
div				{margin:0px; padding:0px}
img				{display:block; border:0px; margin:0px; padding:0px}

h1				{padding:0px; margin:20px 0px; font-size:var(--font-size-lrg); color:var(--color); text-transform:uppercase; font-weight:var(--font-bol); text-align:center}
h2				{padding:0px; margin:20px 0px; font-size:var(--font-size-lrg); color:var(--color); text-transform:uppercase; font-weight:var(--font-bol); text-align:center}
h3				{padding:0px; margin:20px 0px; font-size:var(--font-size-med); color:var(--color); text-transform:uppercase; font-weight:var(--font-lig); text-align:center}
h4				{padding:0px; margin:20px 0px; font-size:var(--font-size-med); color:var(--black); text-transform:uppercase; font-weight:var(--font-lig); text-align:center}
ul, li			{margin:0px !important; padding:0px !important; text-align:center; list-style-position:inside}

sup				{bottom:0.1em; font-size:calc(var(--font-size-sml) * 0.8) !important}

a:link     		{color:var(--black); background:transparent; text-decoration:none}
a:visited 		{color:var(--black); background:transparent; text-decoration:none}
a:hover   		{color:var(--color); background:transparent; text-decoration:none}
a:active		{color:var(--black); background:transparent; text-decoration:none}

input			{color:var(--black-med) !important; font-size:var(--font-size) !important; margin:5px 0px !important; padding:5px !important; height:var(--font-size-lrg) !important; border:var(--border) !important; border-radius:var(--border-radius) !important; -moz-border-rightradius:var(--border-radius) !important; -khtml-border-radius:var(--border-radius) !important; -webkit-border-radius:var(--border-radius) !important}
textarea		{color:var(--black-med) !important; font-size:var(--font-size) !important; margin:5px 0px !important; padding:8px 5px !important; height:calc(var(--font-size-lrg) * 5.9) !important; border:var(--border) !important; border-radius:var(--border-radius) !important; -moz-border-rightradius:var(--border-radius) !important; -khtml-border-radius:var(--border-radius) !important; -webkit-border-radius:var(--border-radius) !important}
select			{color:var(--black-med) !important; font-size:var(--font-size) !important; margin:5px 0px !important; padding:2px !important; height:var(--font-size-lrg) !important; border:var(--border) !important; border-radius:var(--border-radius) !important; -moz-border-rightradius:var(--border-radius) !important; -khtml-border-radius:var(--border-radius) !important; -webkit-border-radius:var(--border-radius) !important}
button:not(.mfp-close):not(.mfp-arrow):not(.gm-ui-hover-effect), label					{color:var(--black-med) !important; font-size:var(--font-size) !important; margin:5px 0px !important; padding:0px 5px !important; height:var(--font-size-lrg) !important; font-family:var(--font) !important; font-weight:var(--font-med) !important; text-transform:uppercase; border-radius:var(--border-radius) !important; -moz-border-rightradius:var(--border-radius) !important; -khtml-border-radius:var(--border-radius) !important; -webkit-border-radius:var(--border-radius) !important; background:var(--color-med) !important; color:var(--white) !important; width:40%; margin-left:30% !important; margin-right:30% !important}
button:not(.mfp-close):not(.mfp-arrow):not(.gm-ui-hover-effect):hover, .button:hover	{background:var(--color) !important}
.button			{background:var(--color-lig) !important}

.row			{max-width:1200px}
.justify		{text-align:justify}
.left			{text-align:left}
.center			{text-align:center}
.right			{text-align:right}
.italic			{font-style:italic}
.small			{font-size:var(--font-size-sml)}
.icon			{font-size:calc(var(--font-size-lrg) * 1.4); margin:0px 20px; color:var(--black-med)}

.float 			{float:right; margin:0px 10px 10px 10px; height:calc(var(--font-size-lrg) * 8); border-radius:var(--border-radius) !important; -moz-border-rightradius:var(--border-radius) !important; -khtml-border-radius:var(--border-radius) !important; -webkit-border-radius:var(--border-radius) !important}

.logo			{margin:0px; padding:0px}

.navigation											{background:var(--white); z-index:100; padding:10px 0px; max-height:90px; top:var(--font-size-lrg) !important}
.navigation *										{font-family:var(--font) !important; font-weight:var(--font-med) !important; font-size:var(--font-size) !important; background:transparent !important}
.navigation .top-bar								{max-width:1200px; margin:0px auto}
.navigation .top-bar .name							{margin:0px; padding:0px}
.navigation .top-bar .toggle-topbar a span			{color:var(--black-med)!important}
.navigation .top-bar-section li						{background:transparent !important; margin:0px; padding:0px}
.navigation .top-bar-section li a:not(.button)			{background:transparent !important; color:var(--black) !important; padding:8px 10px !important}
.navigation .top-bar-section li a:not(.button):hover	{background:transparent !important; color:var(--black-lig) !important}
.navigation .top-bar-section ul li.active > a			{background:transparent !important; color:var(--black-lig) !important}
.navigation .top-bar-section ul li.active > a:hover		{background:transparent !important; color:var(--black-lig) !important}

.orbit									{background:var(--white-med); margin:0px; padding:0px}
.orbit-container 						{width:100%; max-width:1950px; min-height:140px; margin:0px auto}
.orbit-slides-container 					{width:100%; position:relative}
.orbit li 								{width:100%; background-size:cover; background-position:center}
.orbit li:not(.active)					{opacity:0 !important}
.orbit img:not(.orbitfade)				{width:100%}
.orbit-container .orbit-slides-container > * .orbit-caption 	{font-size:var(--font-size-lig); line-height:var(--font-size-lrg); background:transparent; color:var(--white); text-align:right; letter-spacing:2px; text-transform:uppercase}
.orbit-timer							{display:none}
.orbit .active							{background:transparent}
.orbit .orbitfade						{position:absolute; top:0px; left:0px; width:100%; height:100%}

.orbit-text								{position:absolute; top:80%; left:50%; -moz-transform:translateX(-50%) translateY(-80%); -webkit-transform:translateX(-50%) translateY(-80%); transform:translateX(-50%) translateY(-80%)}
.orbit-text	p							{font-size:var(--font-size-lrg); color:var(--black-med); text-transform:uppercase; font-weight:var(--font-bol); text-align:left}
.orbit-text	p strong					{font-size:var(--font-size-med); font-weight:var(--font-bol); color:#356aa9}
.orbit-text	p strong span				{font-size:var(--font-size-med); font-weight:var(--font-bol); color:#d5242b; text-transform:capitalize}
	
.content		{margin:10px 0px 30px 0px; padding:0px 5px !important}

.white			{background:var(--white)}
.grey			{background:var(--white-med)}

.clients li		{margin-top:20px !important; padding:10px 0px !important}

.properties													{margin-top:20px}
.properties li ,.gallery li									{padding:0px; margin:0px; border:solid 5px transparent; overflow:hidden; position:relative} .gallery li {border:0px}
.properties li div:not(.img) ,.gallery li div:not(.img)		{padding:5px; margin:0px}
.properties li div ,.gallery li div							{background-size:cover; background-position:center; border-radius:var(--border-radius) !important; -moz-border-rightradius:var(--border-radius) !important; -khtml-border-radius:var(--border-radius) !important; -webkit-border-radius:var(--border-radius) !important; background-image:url('../img/kl-development-property.png'); background-repeat:no-repeat; background-position:center}
.properties li div:not(.img) ,.gallery li div:not(.img)		{border:var(--border) !important}
.properties li div div ,.gallery li div div					{height:calc(var(--font-size-lrg) * 8)}
.properties li:hover div div ,.gallery li:hover div div		{filter:alpha(opacity=20); opacity:0.2; -moz-opacity:0.2; -khtml-opacity:0.2}
.properties li div .icon ,.gallery li div .icon				{display:none; padding:0px !important; margin:0px !important; position:absolute; top:50%; left:50%; -moz-transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); transform:translateX(-50%) translateY(-50%); text-align:center}
.properties li:hover div .icon ,.gallery li:hover div .icon	{display:block}
.properties li p											{width:calc(100% - 12px); position:absolute; bottom:6px; line-height:var(--font-size-lrg); background:var(--white-med); color:var(--black)}
.properties li div span:not(.icon)							{position:absolute; left:25px; bottom:50px; z-index:1; font-size:calc(var(--font-size-sml) * 0.98) !important; color:var(--white-med) !important; float:right; line-height:40px; height:40px; width:40px; display:block; background-image:url('../img/google/google-marker-site.png'); background-repeat:no-repeat; background-position:center; border-radius:50% !important; -moz-border-rightradius:50% !important; -khtml-border-radius:50% !important; -webkit-border-radius:50% !important}
.properties li div .fade,.gallery li div .fade				{position:absolute; top:0px; left:0px; width:100%; height:100%; padding:6px}

.googlemap *		{margin:0px; padding:0px; font-family:var(--font) !important}
.googlemap .icon	{margin:0px 2px 0px 5px; padding:0px; font-size:var(--font-size-lrg); color:var(--black-med)}

.g-recaptcha div	{margin:5px auto; max-height:75px}

.translate																					{background:var(--white) !important; position:absolute; top:0px; width:100%; height:calc(var(--font-size-lrg) - 1) !important; z-index:1000; border-bottom:1px solid #c2c2c2 !important; position:fixed !important}
.translate #google_translate_element * 															{border:none !important; font-family:var(--font) !important; font-weight:var(--font-med) !important; font-size:var(--font-size) !important}
.translate #google_translate_element img 														{display:inline-block !important}
.translate #google_translate_element select, .translate  #google_translate_element option		{padding:0px !important; margin:-4px 0px 0px 0px !important; float:right !important; background-color:var(--white) !important; max-width:135px; text-align:center !important; text-align-last:center !important; font-size:calc(var(--font-size-sml) * 0.98) !important; }
.translate #goog-gt-tt, .goog-te-balloon-frame, .goog-logo-link, .goog-te-banner-frame			{display:none !important}
.translate #google_translate_element .goog-te-gadget, .translate #google_translate_element a	{color:var(--black-med) !important; margin:6px 0px; font-size:var(--font-size-sml) !important}
.translate #google_translate_element .goog-text-highlight 										{background:none !important; box-shadow:none !important}

.footer 		{padding:20px 0px}
.footer * 		{font-size:calc(var(--font-size-sml) * 0.9)}
.footer .icon	{font-size:var(--font-size-lrg); color:var(--black-med)}

/* @media - iphone */

@media only screen and (max-width:740px){
.logo							{height:98%; margin:auto 10px}
.navigation						{max-height:none}
.navigation .top-bar-section li	{margin:10px; text-align:center}
}

/* @media - ipad menu */

@media only screen and (device-width:768px){
.logo							{margin:auto}
.navigation						{max-height:none}
.navigation .top-bar			{max-width:1000px}
}

/* @media - landscape logo */

@media only screen and (orientation:landscape){
.logo							{width:auto; margin:auto}
}

/* @media - menu padding */

@media only screen and (orientation:portrait){
.navigation .top-bar-section li	{margin:10px; text-align:center}
}