/*
Theme Name: Raihani Real Estate theme
Theme URI: http://orangetween.com/
Description: raihani real estate theme
Author: 206115540
Author URI: http://sanzenin88.wordpress.com/
Version: 1.1
Tags: wordpress
 
License: none
 
dibuat pake wp 3.7.1, 2013 nov 11
*/

@font-face {
	font-family: 'pakenhamrg';
	src: url('./fonts/pakenham rg.woff') format('woff');
}
@font-face {
	font-family: 'fontin sans';
	src: url('./fonts/Fontin_Sans_R_45b.woff') format('woff');
}

*, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
html, body {width: 100%; height: 100%;}
body {position: relative; background: url('./images/bgfull.jpg') center top no-repeat #000; background-size: 100% auto; background-attachment: fixed; font-family: Tahoma, Arial; color: #fff; font-size: 13px;}
body.no-bg {background: #000;}
img {max-width: 100%; height: auto;}
a {color: inherit; text-decoration: none;}
h1, h2, h3, h4, h5, h6 {font-weight: normal;}
h1 {font-size: 40px; margin: 0 0 10px;}
.clearfix:after {content: " "; display: table; clear: both;}

.container {width: 870px; max-width: 100%; margin: 0 auto;}
.container.white-bg {background: #fff; color: #000;}
.container.padded {padding: 20px 50px;}
.grid-wrapper {margin: 0 -10px;}
.grid-wrapper:after {content: " "; display: table; clear: both;}
.grid-2 {width: 50%; float: left; padding: 0 10px;}
.grid-3 {width: 33.33%; float: left; padding: 0 10px;}
.grid-3-2 {width: 66.66%; float: left; padding: 0 10px;}

.container input, .container textarea, .container select {background: #aaa; color: #000; border: 0; padding: 5px 10px; max-width: 100%;}

.super-wrapper {min-height: 100%;}

nav ul {list-style: none; margin: 0; padding: 0;}

/*.page-header {background: url('./images/topbg.png') repeat-x; height: 163px; padding: 20px 0; position: relative; z-index: 10;}*/
.page-header {background: linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0)); height: 163px; padding: 20px 0; position: relative; z-index: 10;}
body.no-bg .page-header {background: #000; height: auto;}

.logo {width: 200px;}

.main-navi-but {display: none; padding: 10px; font-family: 'pakenhamrg', Arial; font-size: 18px; text-align: left; cursor: pointer;}
.main-navi {float: right; font-family: 'pakenhamrg', Arial; font-size: 18px; text-transform: uppercase;}
.main-navi ul {list-style: none;}
.main-navi ul li {display: inline-block; margin: 0; padding: 5px 10px; position: relative;}
.main-navi ul li ul {position: absolute; right: 0; display: none; background-color: #000;}
.main-navi ul li ul li {text-align: right; padding: 5px 10px; display: block; white-space: nowrap; width: 200px;}
.main-navi ul li:hover {background-color: #000;}
.main-navi ul li:hover ul {display: block;}

.content-wrapper {overflow: auto;}

/*.home-wrapper {}
.home-wrapper .grid-3 {position: relative; height: 440px; margin-bottom: 10px; overflow: hidden;}
.home-content {height: 440px;}
.home-content.front {background: #000; background: rgba(0,0,0,0.7); text-align: center; cursor: pointer; display: block; width: 100%; float: left;}
.home-content.back {background: #000; background: rgba(78,78,78,0.7); padding: 20px; width: 0; display: block; float: left;}*/

.home-wrapper {overflow: hidden;}
.home-wrapper .grid-3 {position: relative; height: 440px; perspective: 1000px; overflow: hidden; margin-bottom: 10px;}
.home-content {position: absolute; left: 10px; top: 0px; right: 10px; bottom: 0px;  transition: all 0.7s ease;}
.home-content.front {background: #000; background: rgba(0,0,0,0.7); text-align: center; cursor: pointer; opacity: 1; transform: translateZ(0); pointer-events: auto;}
.home-content.back {background: #000; background: rgba(78,78,78,0.7); padding: 20px; opacity: 0; transform: translateZ(-1000px); pointer-events: none; font-family: 'fontin sans', Arial}

.home-search {line-height: 100%;}
.home-search .type-wrapper {font-size: 0;}
.home-search .type-wrapper label {display: inline-block; font-size: 20px; width: 50%; color: #cdcbcb; cursor: pointer; text-align: center;}
.home-search .type-wrapper span {display: inline-block; width: 100%; border-radius: 10px; padding: 15px 5px; transition: all 0.3s ease;}
.home-search .type-wrapper input[type=radio] {display: none;}
.home-search .type-wrapper input[type=radio]:checked + span {color: #fff; background: #000; background: rgba(0,0,0,0.6);}
.home-wrapper input[type=text], .home-search input[type=search], .home-search select {display: block; padding: 10px 20px; width: 100%; border: 0; border-radius: 10px; background: #e0e0e0; font-size: 14px; color: #4d4c4c; -moz-box-sizing: border-box; box-sizing: border-box;}
.home-wrapper input[type=submit], .home-wrapper .btn {display: block; padding: 10px 20px; width: 100%; border: 0; border-radius: 10px; background: #e0e0e0; font-size: 20px; color: #4d4c4c; text-align: center; transition: all 0.3s ease;}
.home-wrapper input[type=submit]:hover, .home-wrapper .btn:hover {color: #e0e0e0; background: #4d4c4c;}

/*.home-wrapper.show-search, .home-wrapper.show-list, .home-wrapper.show-contact  {margin-left: -33%;}
.home-wrapper.show-search .grid-3, .home-wrapper.show-list .grid-3, .home-wrapper.show-contact .grid-3 {width: 25%;}
.home-wrapper.show-search .home-search {width: 50%;}
.home-wrapper.show-search .home-search .front {width: 49%; margin-right: 2%;}
.home-wrapper.show-search .home-search .back {width: 49%;}
.home-wrapper.show-list .home-list {width: 50%;}
.home-wrapper.show-list .home-list .front {width: 49%; margin-right: 2%;}
.home-wrapper.show-list .home-list .back {width: 49%;}
.home-wrapper.show-contact .home-contact {width: 50%;}
.home-wrapper.show-contact .home-contact .front {width: 49%; margin-right: 2%;}
.home-wrapper.show-contact .home-contact .back {width: 49%;}*/

.home-wrapper.show-search .home-search .front {opacity: 0; transform: translateZ(1000px); pointer-events: none;}
.home-wrapper.show-search .home-search .back {opacity: 1; transform: translateZ(0); pointer-events: auto;}
.home-wrapper.show-list .home-list .front {opacity: 0; transform: translateZ(1000px); pointer-events: none;}
.home-wrapper.show-list .home-list .back {opacity: 1; transform: translateZ(0); pointer-events: auto;}
.home-wrapper.show-contact .home-contact .front {opacity: 0; transform: translateZ(1000px); pointer-events: none;}
.home-wrapper.show-contact .home-contact .back {opacity: 1; transform: translateZ(0); pointer-events: auto;}

.home-content h1 {font-size: 51px; line-height: 440px; display: inline-block; vertical-align: middle;}

/*.header-search {background: linear-gradient(to bottom, #fff, #2c2c2c); padding: 10px 20px; font-size: 25px; color: #000; margin-bottom: 20px;}*/
/*.header-search {background: linear-gradient(to right, #000 50%, #fff 50%, #fff 100%); padding: 0 20px; font-size: 20px; color: #000; margin-bottom: 20px;}*/
.header-search {width: 870px; max-width: 100%; padding-left: 100px; font-size: 16px; color: #000; margin: 0 auto 20px;}
.header-search .container {background: #fff; padding: 2px;}
.header-search nav {display: inline-block; vertical-align: middle; padding-left: 15px; font-weight: bold;}
.header-search nav ul li {display: inline-block;}
.header-search a {margin-right: 30px;}
.header-search .search-form {float: right;}
.header-search .search-form input[type=text], .header-search .search-form input[type=search] {font-size: 12px; border: 0; border-radius: 0; padding: 3px 10px; background: #888; color: #000;}
.header-search .search-form input[type=submit] {display: none; border: 0; border-radius: 0; background: transparent; color: #000; padding: 2px 10px 5px;}

.static-wrapper {background: #fff; background: linear-gradient(to bottom, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0) 100%); padding: 20px 20px 150px; margin-bottom: 80px; width: 440px; max-width: 100%; color: #000; font-size: 16px;}

.about-children {padding-bottom: 20px;}
.about-children .about-child {display: block; margin-bottom: 15px; font-size: 30px; color: #fff; padding: 10px 20px; background: #000; transition: all 0.5s ease;}
.about-children .about-child:nth-child(3n) {text-align: left;}
.about-children .about-child:nth-child(3n+1) {text-align: right;}
.about-children .about-child:nth-child(3n+2) {text-align: center;}
.about-children .about-child:hover {background: rgba(0,0,0,0.7);}
.about-children .about-child a {display: block;}

.sortcontrol {display: block; margin: 15px 0; background: #000; color: #fff; padding: 8px 15px; font-size: 12px; text-align: right;}
.sortcontrol span {display: inline-block; padding: 5px 10px; border-radius: 5px;}
.sortcontrol span.active {background: #fff; color: #000;}
.sortcontrol a {font-size: 12px; color: #888;}
.sortcontrol a.active {color: #000;}

.post {clear: both; margin-bottom: 40px;}
.post .post-content-wrapper {width: 400px; max-width: 100%;}
.post .post-heading {font-size: 1.7em; line-height: 2em;}
.post .post-heading-smaller {font-size: 1.2em; line-height: 1.7em;}
.post .post-img {float: right; margin: 0 0 10px 20px;}
.post .post-img-full {display: block; margin: 0 auto 10px;}
.post .post-price {font-weight: bold;}
.post .post-faci {text-align: right;}
.faci-value {display: inline-block; width: 23px; height: 23px; border-radius: 50%; border: 2px solid #a7a9ac; text-align: center; vertical-align: middle; color: #a7a9ac; font-size: 12px; margin-right: 10px;}
.faci-icon-bedroom {display: inline-block; background: url('./images/facicons.png') no-repeat; width: 25px; height: 25px; vertical-align: middle;}
.faci-icon-bathroom {display: inline-block; background: url('./images/facicons.png') -25px 0 no-repeat; width: 25px; height: 25px; vertical-align: middle;}
.faci-icon-carpark {display: inline-block; background: url('./images/facicons.png') -51px 0 no-repeat; width: 25px; height: 25px; vertical-align: middle;}

.post-detail {border: 1px solid #777; padding: 10px 20px; margin: 20px auto;}
.post-agents {width: 30%; float: right;}
.post-content {width: 60%; float: left;}
a.read-more {display: block; text-align: right; font-weight: bold; padding: 10px 0 0;}

.dl-pdf {display: inline-block; padding: 5px 15px; border: 1px solid #000; background: #fff; color: #000; border-radius: 10px; margin: 5px 0; transition: all 0.3s ease; text-align: center;}
.dl-pdf:hover {background: #000; color: #fff;}

.post-nav-links .next {float: right;}

.footer-top {background-color: #000; background-color: rgba(0,0,0,0.8); text-align: center; padding: 20px 0;}
.footer-top .container {position: relative;}
.bottom-bar-wrapper {position: relative; overflow: hidden; height: 20px;}
.bottom-bar-wrapper .bottom-bar-unit {position: absolute; left: 0; width: 100%; transition: all 0.5s ease;}
.bottom-bar-wrapper .bottom-bar-unit.active {left: 0;}
.bottom-bar-wrapper .bottom-bar-unit.prev {left: -100%;}
.bottom-bar-wrapper .bottom-bar-unit.next {left: 100%;}
.bottom-bar-prev {position: absolute; left: 0; top: 0; display: block;}
.bottom-bar-next {position: absolute; right: 0; top: 0; display: block;}

.bottom-bar-prev {width: 20px; height: 20px; overflow: hidden; text-indent: -9999px; background: url('./images/arrow.png') left top no-repeat; background-size: 40px 20px;}
.bottom-bar-next {width: 20px; height: 20px; overflow: hidden; text-indent: -9999px; background: url('./images/arrow.png') -20px 0 no-repeat; background-size: 40px 20px;}

.page-footer {background-color: #000; position: relative; padding: 10px 0; margin-top: 40px;}
.page-footer:before {content: ''; position: absolute; top: -30px; left: 0; right: 0; height: 30px; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1) 90%);}
.footer-grid {width: 570px; margin: 0 auto; max-width: 100%;}
.social {padding: 20px 0;}
.soc {display: inline-block; width: 31px; height: 31px;}
.soc.twit {background: url('./images/socmedia.png');}
.soc.fb {background: url('./images/socmedia.png') -31px 0;}
.soc.be {background: url('./images/socmedia.png') -62px 0;}
.soc.pin {background: url('./images/socmedia.png') -93px 0;}
.soc.twit2 {background: url('./images/socmedia.png') -124px 0;}
.copyright {text-align: center; font-size: .8em; padding-top: 10px;}
.footer-nav {text-align: center; padding: 10px 0;}
.footer-nav ul li {display: inline-block; padding: 0 0 0 10px;}
.footer-nav ul li:first-child {padding: 0;}
.footer-nav ul li:after {content: '|'; display: inline-block; margin-left: 10px;}
.footer-nav ul li:last-child:after {display: none;}
.footer-text {width: 570px; margin: 0 auto; text-align: center; border-top: 5px solid #fff; padding: 10px 0 0;}

.body-bg {position: absolute; left: 0; top: 0; width: 100%; height: 600px; z-index: -1;}
.body-bg div {background-position: center top; background-repeat: no-repeat; background-size: 100% auto; position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 0; transition: all 0.5s ease;}
.body-bg div.active {opacity: 1;}

.home-banner-wrapper {position: relative; margin-bottom: 80px; z-index: 1;}
.home-banner-wrapper .home-banner {position: absolute; top: 0; left: 0; right: 0; transition: all 0.5s ease; opacity: 0; pointer-events: none; height: 440px;}
.home-banner-wrapper .home-banner.active {position: relative; opacity: 1; pointer-events: auto;}
.home-banner-wrapper .home-banner .content {background: rgba(0,0,0,0.8); color: #fff; padding: 20px; height: 250px; position: relative; top: 100px; text-align: center;}
.home-banner-wrapper .home-banner .content h1 {margin: 0 0 10px; font-size: 40px;}
.home-banner-wrapper .home-banner .content p {margin: 0 0 10px; font-size: 20px;}
.home-banner-wrapper .home-banner .content a {float: right; display: inline-block; color: #303030; background: #fff; padding: 10px 20px; font-size: 20px; border-radius: 10px; transition: all 0.4s ease;}
.home-banner-wrapper .home-banner .content a:after {content: ''; display: table; clear: both;}
.home-banner-wrapper .home-banner .content a:hover {color: #fff; background: #303030;}
.home-banner-controls {position: absolute; top: 0; left: 0; bottom: 80px; width: 100%; z-index: 0;}
.home-banner-controls .prev {display: block; width: 85px; height: 85px; background: url('./images/arrow.png'); position: absolute; left: 20px; top: 50%; margin-top: -42px; text-indent: -9999px; overflow: hidden; cursor: pointer; transition: all .3s ease;}
.home-banner-controls .next {display: block; width: 85px; height: 85px; background: url('./images/arrow.png') -85px 0; position: absolute; right: 20px; top: 50%; margin-top: -42px; text-indent: -9999px; overflow: hidden; cursor: pointer; transition: all .3s ease;}
.home-banner-controls .prev:hover, .home-banner-controls .next:hover {box-shadow: 0 0 20px #000;}

.contact-popup {position: absolute; left: 50%; z-index: 99; padding: 30px; max-width: 100%; background: #eee; border-radius: 10px; border: 1px solid #000; box-shadow: 0 0 20px #aaa; transition: opacity .6s ease; opacity: 0; pointer-events: none; visibility: hidden;}
.contact-popup.show {opacity: 1; pointer-events: auto; display: block; visibility: visible;}
.contact-popup header {text-align: center;}
.contact-popup header h3 {font-size: 1.3em; font-weight: bold;}
.contact-popup .close {position: absolute; right: 10px; top: 10px; cursor: pointer; text-shadow: 1px 1px 0 #ccc; transition: all .4s ease;}
.contact-popup .close:hover {color: #444; text-shadow: 1px 1px 0 #aaa;}

/* flex */
.flexslider {box-shadow: none; border: 0; border-radius: 10px; box-shadow: none;}
.flexslider .slides img {width: auto; height: auto; display: block; margin: 0 auto; max-width: 100%;}
.slides li {position: relative;}
.flex-viewport {border-radius: 10px;}

/* cf7 */
.wpcf7-form {font-family: tahoma, Arial; font-weight: bold;}

/* gmap temp */
#googleiframe {max-width: 100%;}

.video-wrap {width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 25px;}
.video-wrap iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

/* share this */
.stButton .stFb, .stButton .stTwbutton, .stButton .stMainServices {height: auto !important;}


.about-wrapper {position: relative; transform: rotateZ(45deg); height: 700px;}
.about-wrapper * {position: absolute;}
.about-wrapper .clickable {cursor: pointer;}
.about-wrapper .photo {border-radius: 10px;}
.about-wrapper .content {border-radius: 20px; transition: all .5s ease; opacity: 0;}
.about-wrapper .content.active {opacity: 1;}


body.no-bg .page-header {padding-bottom: 60px;}
body.no-bg .page-header .container {position: relative;}
body.no-bg .page-header .container:before {content: ''; position: absolute; bottom: -40px; left: 0; width: 280px; height: 24px; background: #fff;}


@media only screen and (min-width: 601px) {
	.main-navi {display: block !important;}
}

@media only screen and (max-width: 600px) {
	body {background-size: cover; background: #000;}
	.page-header {background: #000; height: auto;}
	
	.super-wrapper {padding: 0 !important; margin: 0 !important;}
	
	.page-header {height: auto; padding: 20px 10px;}
	.container.padded {padding: 20px;}
	.grid-wrapper {margin: 0;}
	.grid-2 {width: 100%; float: none;}
	.grid-3 {width: 100%; float: none;}
	.grid-3-2 {width: 100%; float: none;}
	
	.logo {max-width: 100%; display: block; margin: 0 auto 10px;}

	.main-navi-but {display: block; background: #000;}
	.main-navi {float: none; padding-top: 0; display: none;}
	.main-navi ul {list-style: none;}
	.main-navi ul li {display: block; background: #000;}
	.main-navi ul li ul {position: relative; right: 0; display: block;}
	.main-navi ul li ul li {text-align: left; padding: 5px 10px 5px 20px; width: auto;}
	
	.header-search {margin-bottom: 20px; padding: 0;}
	
	.content-wrapper {max-height: none;}
	
	.post-agents {width: 100%; float: none;}
	.post-content {width: 100%; float: none;}
	
	.page-footer {padding: 10px;}
	.footer-nav ul li {display: block; padding: 0;}
	.footer-nav ul li:after {display: none; margin: 0;}
	.footer-text {width: 100%;}
	
	.body-bg {display: none;}
	
	.home-banner-wrapper {position: relative; margin-bottom: 0; z-index: 1;}
	.home-banner-wrapper .home-banner {position: relative; opacity: 1; pointer-events: auto; height: auto;}
	.home-banner-wrapper .home-banner .content {background: rgba(0,0,0,0.8); color: #fff; padding: 20px; height: auto; position: relative; top: 0; text-align: center;}
	.home-banner-wrapper .home-banner .content h1 {margin: 0 0 10px; font-size: 40px;}
	.home-banner-wrapper .home-banner .content p {margin: 0 0 10px; font-size: 20px;}
	.home-banner-wrapper .home-banner .content a {float: right; display: inline-block; color: #303030; background: #fff; padding: 10px 20px; font-size: 20px; border-radius: 10px; transition: all 0.4s ease;}
	.home-banner-wrapper .home-banner .content a:hover {color: #fff; background: #303030;}
	.home-banner-wrapper .home-banner .content:after {content: ''; display: table; clear: both;}
	.home-banner-controls {display: none;}
	
	.contact-popup {left: 0; margin-left: 0 !important;}
	
	body.no-bg .page-header {padding-bottom: 20px;}
	body.no-bg .page-header .container:before {display: none;}
}