/*
Theme Name: Realmark Property Template
Theme URI:
Description: WordPress theme custom made for Realmark
Author: The Factory (Australia) Pty Ltd
Author URI: http://www.the-factory.com.au
Version: 0.1
Tags: the factory
 
*/

/*** GLOBAL : GENERAL STYLE DEFAULTS ***/
*, html
{
	margin: 0;
	padding: 0;
}
body
{
background-color: #1a577e;
margin: 0;
padding:0;
font-size: 10px;
}
body, input, textarea
{
	color: #222;    
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: 0.01em;
}
h1, h2, h3, h4, h5, h6, P
{ 
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;
	color: #1a577e;
	text-align: center;
	margin-bottom: 15px;
}
hr
{
	background-color: #999;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}
pre
{
	font: 11px Monaco, monospace;
	line-height: 1.5;
	margin-bottom: 1.5em;
}
code
{
	font: 11px Monaco, monospace;
}
p
{
	margin: 4px 0 12px 0;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;
	font-size: 110%;
}
a
{
	color: #0a77e6;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;
}
a:hover
{
	
	color: #065c88;
}
a:visited
{
	color: #8b46d1;
}

section, article, div, ul, li, A, td { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.entry-title {
text-indent: 100%;
text-wrap:none;
overflow:hidden;
margin: 0;
padding: 0;
}

h1 {
	font-size: 3.6em; line-height: 40px;
}
h2 {
	font-size: 3em;
}
h3 {
	font-size: 2.7em;
}
h4 {
	font-size: 2.2em;
	max-width: 85%;
	margin: 0 auto 15px auto;
}
h5 {
	font-size: 1.7em;
}
P { font-size: 1.5em; }



/*** PAGE LAYOUT ***/

/* Styles that affect the entire layout of the page */

INPUT[type="checkbox"], INPUT[type="radio"] { display: none; }
#nav-responsive-main + LABEL { display: none; }
div#wrapper {
		margin: 0 auto;
		padding:0;
		width: 100%;
		display: block;
}

div.container
{
	margin: 0 auto;
	max-width: 1280px;
}
div.content
{
	padding: 30px 20px;

}
div#header
{
   text-align:center;
   position: relative; 
   z-index: 101;
}

a#logo { display: none; }

div#bluestripe
{
	width:100%;
	height:4px;
	margin:0;
	padding:0;
	background-color:#1a577e;
}
div#footer {
background-color: #1a577e;
height: 50px;
padding: 20px 20px 60px 20px; 
width: 100%;
text-align: center;
color: #c8d7ee;
}

div#footer p {
margin-top:10px;
font-size:13px;
}

/*** HEADER : MENU ***/

/* To see a menu in your header, you'll need to first add one in WordPress Admin */
.menu-header-device { display: none; }
div#header .menu {
		background-color:#ffffff;
		height: 43px;
}
div#header .menu {
}

div#header .menu ul
{
    list-style: none;

}
div#header .menu ul ul
{
    display: none;
}
div#header .menu li
{
    display:inline-block;
	padding: 0px 15px;
}
.menu-item
{

}
div#header .menu-item a
{
	font-size: 18px;
	text-decoration: none;
	color: #1a577e;
	margin:0;
	padding: 8px 15px 8px 15px;
    display:block;
}
div#header .menu-item a:hover
{
	color: #ffffff;
	background: #1a577e;
}

div#header li.current-menu-item a {
	color: #ffffff;
	background: #1a577e;
}


/*** HEADER : OTHER ***/

/*** HEADER : HOME PAGE ***/

div#homebanner {
width: 100%;
height: auto;
display:block;
overflow: hidden;
position: relative;
/*background: url(img/neptune-banner.jpg) no-repeat center center;
background-size: cover;*/
}

div#innerbanner {
width: 100%;
display:block;
overflow: hidden;
position: relative;
height: 250px;
background-position: center 0;
background-size: auto 100%;
background-repeat: no-repeat;
}

.rslides_container { margin: 0 auto!important; }
.rslides_container:after { display: block; content:''; clear: both; }

div#logopanel {
position: absolute;
width: 100%;
height: 150px;
display:block;
background: url(img/zahra-logopanel.png) repeat-x center -15px;
z-index: 100;
text-align:center;
}

div#logopanel a {
height: 150px;
display:block;
z-index: 101;
position: relative;
text-indent: 100%;
overflow: hidden;
background: url(img/zahra-apartments-logo.jpg) no-repeat center;
}


/** middle section **/

div#midsection {
display:block;
width: 100%;
position: relative;
background-color: #fff;
}

div.inner-menu {
	display:block;
width: 100%;
position: relative;
	background-color: #b6b7ba;
padding-bottom: 40px;
}

/** HEADER : INNER PAGE **/

div#homebannerinner {
margin:0;
padding:0;
width: 100%;
height: 300px;
display:block;
background: url(img/zahra-banner.jpg) no-repeat center -200px;
z-index: 99;
box-sizing: border-box;
}

div#logopanelinner {
margin:0;
padding:0;
width: 100%;
height: 100px;
display:block;
background: url(img/zahra-logopanel.png) repeat-x center -15px;
z-index: 100;
text-align:center;
box-sizing: border-box;
}

div#logopanelinner a {
height: 100px;
display:block;
z-index: 101;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background: url(img/zahra-apartments-logo.jpg) no-repeat center;
}

/** MIDDLE SECTION INNER PAGE **/

div#midsectioninner {
width: 100%;
background-color: #fff;
padding: 30px 0;
}

div#midsectioninner h1, div#midsectioninner h2, div#midsectioninner h3, div#midsectioninner h4,div#midsectioninner  h5, div#midsectioninner P {
	color: #1a577e;
	text-align: left;
	margin-bottom: 20px;
}
div#midsectioninner h3, div#midsectioninner h4, div#midsectioninner h5, div#midsectioninner P { color: #000; }
.img-center { text-align: center; margin: 15px auto 30px auto; display: block; }
.img-left { float: left; display: inline; margin: 0 30px 10px 0; } 
.img-right { float: right; display: inline; margin: 0 0 10px 30px; } 
.img-left IMG, .img-right IMG, .img-center IMG { width: 100%; height: auto; line-height: 0; }
TABLE { width: 100%; margin: 30px auto; display: block; border-collapse: collapse; }
table td { vertical-align: top; padding: 0 30px 0 0; font-size: 10px; }
table td H3, table td .displays H3 { width: 100%; display: block; font-size: 2.2em; font-weight: 400; min-height: 50px; line-height: 25px; border-bottom: 1px solid #e2e2e2; }
table.equal td:after { clear: both; display: block; content:''; }
table td ul { margin: 0; padding: 0 0 0 10px; }
table td li { text-align: left; font-size: 1.5em; margin-bottom: 3px; }
table td .displays { width: 100%; float: left; clear: both; display: block; }
table td ol { width: 100%; list-style: none; display: block; padding: 0; margin: 0; }
table td ol li { width: 100%; display: table; margin-bottom: 3px; text-align: left; font-size: 1.5em; }
table td ol li span:first-of-type { display: table-cell; vertical-align: top; width: 60%; }
table td ol li span:last-of-type { display: table-cell; vertical-align: top; width: 40%; }

/*** Midmenu ***/
div#midmenu {
width: 100%;
max-width:1240px;
margin: 0 auto;
padding: 40px 0;
}
div#midmenu .menu
{
    list-style: none;
	width: 100%;
}
div#midmenu .menu ul
{
    display: none;
}
div#midmenu .menu:after { content:''; display: block; clear: both; }
div#midmenu .menu li
{
 display:inline;
 float: left;
 padding: 0;
 margin: 0 1%;
 width: 23%;
 height: 250px;
 overflow: hidden;
 background-size: cover!important;
}
div#midmenu .menu li a
{
width: 100%;
display: block;
background-color: rgba(255,255,255,0.75);
color: #587293;
padding: 15px;
font-size: 24px;
text-align: center;
line-height: 20px;
text-decoration: none;
font-weight: 400;
margin-top:20px;
}

div#midmenu li.menu-item-173 { background: url(img/proximity-menu.png) no-repeat center top;}
div#midmenu li.menu-item-172 { background: url(img/finishes-menu.png) no-repeat center top;}
div#midmenu li.menu-item-171 { background: url(img/floorplans-menu.png) no-repeat center top;}
div#midmenu li.menu-item-170 { background: url(img/download-menu.png) no-repeat center top;}

div#midmenu .menu li a:hover
{
background-color: rgba(255,255,255,1.0);
}
/*** NEW MENU **/

div#newmenu {
width: 100%;
max-width:1240px;
margin: 0 auto;
padding: 40px 0px;
}

div#newmenu ul {
list-style: none;
}
div#newmenu:after { content:''; display: block; clear: both;}
div#newmenu li {
 display:inline-block;
 float: left;
 padding: 0;
 margin: 0 1%;
 width: 23%;
 height: 250px;
 }
 
 div#newmenu img {z-index: 1000;}
 
 div#newmenu a {
color: transparent;
 }

/*** MAP SECTION HOMEPAGE ***/

BODY.page-id-19 #midsectioninner .content:after { clear: both; display: block; content:''; }
BODY.page-id-19 div#mapsection { float: right; width: 70%; max-width: 800px; display: inline; background: url(img/zahra-map.jpg) no-repeat 40% top; background-size: auto 650px; height: 600px;  }
BODY.page-id-19 div#mapsection #mapformcontent { width: 60%; }
BODY.page-id-19 div#mapsection #salesinfo { display: none; }
.con-details { width:30%; max-width:300px; display:inline; float:left; }

div#mapsection {
height: 700px;
background: url(img/zahra-map.jpg) no-repeat 0 -90px;
z-index: 100;
width:100%;
text-align: center;
}

div#mapsection .container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 40px 20px;	
}

div#mapsection .container:after { content:''; display: block; clear: both; }

/*** MAP AREA CONTACT FORM ***/
#mapformcontent {
	width: 50%;
	max-width: 550px;
	float: right;
	display:block;
}
#mapform {
	padding: 40px 40px 0 40px;
	clear:both;
	background: #737477;
	width: 100%;
}

#mapform h3 {
font-weight: 500;
color: #fff;
text-align: left;
margin-bottom: 40px;
font-size: 2.2em;
text-transform: uppercase;
}

#mapform P { font-size: 1.7em; color: #fff; display: table; margin: 0 0 10px 0; }
#mapform P label { vertical-align: top; display: table-cell; text-align: left; width: 20%; line-height: 30px; color: #fff; }
#mapform P span { display: table-cell; text-align: left; width: 80%; }
#mapform P input { border: 0; color: #000; font-size: 1em; padding: 10px; display: table-cell; text-align: left; width: 100%; }
#mapform P textarea {border: 0;  color: #000; font-size: 1em; padding: 10px; display: table-cell; text-align: left; max-height: 100px; width: 100%; }
#mapform P.action { padding-left: 67%; }
#mapform P.action input[type="submit"] { cursor: pointer; color: #fff; font-weight: 500; width: 200%; background-color: #1a577e; display: block; text-align: center; padding: 10px; }
#mapform P.action input[type="submit"]:hover { color: #000; }

#salesinfo {
padding: 20px 30px 20px 30px;
background-color: #1a577e;
display: block;
text-align: left;
clear: both;
margin-top: -10px;
}

#salesinfo h5 { text-align: left; font-weight: 400; color: #fff;}
#salesinfo h4 { text-align: left; font-weight: 500; width: 100%; margin: 0 0 15px 0; color: #fff; }

/*** FOOTER MENU ***/

div#footer .menu {
	margin: 0 auto 15px auto;
}

div#footer .menu
{
    list-style: none;
}
div#footer.menu ul
{
    display: none;
}
div#footer .menu li
{
 display:inline-block;
 padding:0;
 margin:0;
}
div#footer .menu-item
{
	padding:0;
}
div#footer .menu-item a
{
	font-size: 18px;
	text-decoration: none;
	color: #c8d7ee;
	padding: 0px 15px;
	margin:0;
    border-right: 1px solid #ffffff;

}
div#footer .menu-item a:hover
{
	color: #ffffff;
}

div#footer .menu li:last-of-type a { border: 0!important; } 

#footer h5 {color:#fff;}

/* Media Alignment */
.alignright
{
	/* Style for right-aligned images in posts */
	padding: 8px 0 8px 8px;
	float: right;
}
.alignleft
{
	/* Style for left-aligned images in posts */
	padding: 8px 8px 8px 0;
	float: left;
}


/*** RESPONSIVE CSS ***/

@media only screen and (min-width : 1920px) {
	div#wrapper { max-width: 1920px; margin: 0 auto; display: block; }
}

@media only screen and (max-width : 1680px) {
	div#mapsection { background-position: 38% -90px; }
}

@media only screen and (max-width : 1280px) {
	#midsectioninner .content{ padding: 0 20px; }
}

@media only screen and (max-width : 960px) {
	BODY.page-id-19 #midsectioninner .content:after { clear: both; display: block; content:''; }
	BODY.page-id-19 div#mapsection { float: left; clear: both; width: 100%; max-width: 100%; display: block; background: url(img/zahra-map.jpg) no-repeat 27% -90px; background-size: auto 650px; height: auto;  }
	BODY.page-id-19 div#mapsection #mapformcontent { width: 50%; }
	BODY.page-id-19 div#mapsection #salesinfo { display: none; }
	.con-details { width:100%; max-width:100%; display:block ; float: left; }
	
	div#innerbanner { height: 200px; }
	div#logopanel, div#logopanel a { height: 150px; }
	div#midmenu .menu li { margin: 0 0.5%; width: 24%; }
	div#mapformcontent { width: 58%; }
	div#mapform { padding: 40px 20px 0 20px; }
	div#mapform P { max-width: 95%; }
	div#mapform P textarea { width: 100%; }
	
	table td { display: block; width: 100%!important; vertical-align: top; padding: 0 0 30px 0!important; }
	table td H3 { font-size: 1.7em; }
	table td li { text-align: left; font-size: 1.4em; margin-bottom: 3px; }
}

@media only screen and (max-width : 767px) {
	/*responsive menu and header*/
	div#header { text-align: center; background-color: #fff; height: 109px; z-index: 120; }
	div#header .menu-header { display: none; }
	div#header a#logo { margin-left: 30px; border: 0; width: 270px; height: 109px; text-decoration: none; text-indent: -9999em; background: url(img/logo-device.jpg) no-repeat 0 0; display: block; text-align: center; }
	.menu-header-device { position: absolute; z-index: 110; top: 0; margin-top: -100%; background-color: #fff; width: 100%; display: block; }
	.menu-header-device .menu { list-style: none; }
	.menu-header-device .menu li { display: block; border-bottom: 1px solid #e2e2e2; padding: 0; margin: 0 auto; }
	.menu-header-device .menu li a { color: #000; text-align: center; padding: 15px; margin: 0 auto; display: block; line-height: 20px; font-size: 1.9em; text-decoration: none; }
	.menu-header-device .menu li a:hover { background-color: #1a577e; color: #fff; }
	.menu-header-device .menu li.current_page_item { background-color: #1a577e; }
	.menu-header-device .menu li.current_page_item a { color: #fff; }
	
	 #nav-responsive-main + LABEL, .menu-header-device {
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
  }
  #nav-responsive-main + LABEL SPAN,
  #nav-responsive-main + LABEL SPAN:before,
  #nav-responsive-main + LABEL SPAN:after {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }
  #nav-responsive-main + LABEL {
    text-indent: 0!important;
    display: block!important;
    position: absolute;
    z-index: 121;
    top: 20px;
    right: 30px;
    cursor: pointer;
    width: 30px;
    border: 1px solid #232C64;
    height: 30px;
    font-size: 1.4em;
    color: #232C64;
  }
  #nav-responsive-main + LABEL SPAN,
  #nav-responsive-main + LABEL SPAN:before,
  #nav-responsive-main + LABEL SPAN:after {
    cursor: pointer;
    height: 2px;
    width: 20px;
    background: #1a577e;
    position: absolute;
    display: block;
    content: '';
    margin-left: 0;
  }
  #nav-responsive-main + LABEL SPAN {
    left: 5px;
    top: 49%;
  }
  #nav-responsive-main + LABEL SPAN:before {
    top: -5px;
    left: 0;
  }
  #nav-responsive-main + LABEL SPAN:after {
    bottom: -5px;
    left: 0;
  }
  #nav-responsive-main:checked ~ LABEL {
    border-color: #232C64;
  }
  #nav-responsive-main:checked ~ LABEL SPAN {
    background-color: #99BEEC;
  }
  #nav-responsive-main:checked ~ LABEL SPAN:before {
    top: 0;
    transform: rotate(45deg);
  }
  #nav-responsive-main:checked ~ LABEL SPAN:after {
    top: 0;
    transform: rotate(-45deg);
  }
  #nav-responsive-main:checked ~ .menu-header-device {
    margin-top: 70px!important;
  }
	BODY.page-id-19 div#mapsection #mapformcontent { width: 100%; }
	div#innerbanner { height: 150px; }
	div#bluestripe, div#logopanel { display: none; }
	div#midmenu .menu li { margin: 1%; width: 48%; }
	div#mapsection { background-position: -450px -190px }
	div#mapsection .container { padding: 0; }
	div#mapformcontent { margin-top: 350px; max-width: 100%; width: 100%; }
	#mapform P label { width: 25%; }
	#mapform P span { width: 68%; }
	#mapform P.action { padding-left: 25%; }
	div#salesinfo { padding: 20px; }
	div#salesinfo h5 { font-size: 1.5em; }
	div#footer .menu { display: none; }
	.img-center, .img-left, .img-right { float: none!important; display: block; text-align: center; margin: 0 auto 20px auto; } 
}

@media only screen and (max-width : 480px) {
	BODY { font-size: 9px; }
	div#header a#logo { margin-left: 0; }
	#nav-responsive-main + LABEL { right: 10px; }
	div#midmenu .menu li { float: none!important; display: block!important; margin: 5px auto!important; width: 100%!important; }
}