/*
Theme Name: Braxmere
Theme URI: http://blacksheepdesign.co.nz
Author: blacksheepdesign
Author URI: http://www.blacksheepdesign.co.nz/
Description: The 2013 Braxmere wordpress theme developed by Blacksheepdesign. This theme works with magic fields.
Version: 1.0
*/

/* Reset selectors and commons properties */
* { margin:0; padding:0; outline:none; }
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }
.hide { text-indent: -9999999px; }
.invisible { visibility:hidden; }
.none, .ui-tabs-hide { height:0 !important; width:0 !important; opacity:0; display:none !important; }
a { text-decoration:none; outline:0 none; color:inherit; }
a img { border:0 none; }
hr { border:0 none; display:block; }
.right, img.alignright { float:right; }
.left, img.alignleft { float:left; }
.chromeframe { z-index:1000; position: relative; background-color:#ffb; font: normal bold 16px Arial, Helvetica, sans-serif; border-bottom:2px solid #DDD; padding:15px; }
.chromeframe a { color:blue; text-decoration:underline; }
blockquote { margin-left:25px; }
fieldset {border: none;}

.clear:before, .clear:after { content: " "; display: table; }
.clear:after { clear: both; }
.clear{ *zoom: 1; }

/* Transitions */
.tbg { transition: background-color .3s; -moz-transition: background-color .3s; -webkit-transition: background-color .3s; -o-transition: background-color .3s; }
.tcolor { transition: color .3s; -moz-transition: color .3s; -webkit-transition: color .3s; -o-transition-property: color; -o-transition-duration:.3s; }
a:hover { text-decoration:underline; }
.trotate { -moz-transition: -moz-transform .3s; -webkit-transition: -webkit-transform .3s; -ms-transition: -ms-transform .3s; }
.topacity, .topacity img { -moz-transition: opacity .5s; -webkit-transition: opacity .5s; -ms-transition: opacity .5s; }
.tmargin { -moz-transition: margin .5s; -webkit-transition: margin .5s; -ms-transition: margin .5s; }
.ttext-shadow { -moz-transition: text-shadow .3s; -webkit-transition: text-shadow .3s; -ms-transition: text-shadow .3s; }
.tbox-shadow { -moz-transition: box-shadow .1s; -webkit-transition: box-shadow .1s; -ms-transition: box-shadow .1s; }
.tall { -moz-transition: all .5s; -webkit-transition: all .5s; -ms-transition: all .5s; }


/* Body & General Wrapper */
html, body { margin:0; padding:0; height:100%; width:100%; }
body { font-size:.9em!important; font-family:'Maven Pro','sans-serif'; margin:0; padding:0; background-color: #f1f1f1; -webkit-font-smoothing: antialiased; }
body#home-page { background-color: #fff;}
.wrapper:not(.home-page) { position:relative; height:100%; width:100%; margin:0 auto; min-height:600px; }

.desc a { text-decoration:underline; }

/* Text Selection */
::selection { background: #ADC6BC; color:#fff; text-shadow:0 1px 0px #999;}
::-moz-selection { background: #ADC6BC; color:#fff; text-shadow:0 0 1px #333; }

/* Colors */
.brown, .brown h2 { color: rgb(172,161,145); }
.blue, .blue h2 { color:rgb(0,53,88); }
.green, .green h2 { color: rgb(159,187,174); }
.lblue, .lblue h2 { color: rgb(111,144,168);  }
.red, .red h2 { color: rgb(111,0,43); }
.white, .white h2 { color:rgb(255,255,255);}
.bgdwhite { background:#f1f1f1;}

.bgbrown { background-color: rgb(172,161,145); }
.bgblue { background-color: rgb(0,53,88); }
.bggreen { background-color: rgb(159,187,174); }
.bglblue { background-color: rgb(111,144,168); }
.bgred { background-color: rgb(111,0,43); }

.bgbrown.btn:hover, .bgbrown.o50 { background-color:rgba(171,161,145,0.7); }
.bgblue.btn:hover, .bgblue.o50 { background-color: rgba(0,53,88,0.7); }
.bggreen.btn:hover, .bggreen.o50 { background-color: rgba(159,187,174,0.7); }
.bglblue.btn:hover, .bglblue.o50 { background-color: rgba(111,144,168,0.7); }
.bgred.btn:hover, .bgred.o50 { background-color: rgba(111,0,43,0.7); }

.bgbrown.o50:hover { background-color:rgba(171,161,145,1); }
.bgblue.o50:hover { background-color: rgba(0,53,88,1); }
.bggreen.o50:hover { background-color: rgba(159,187,174,1); }
.bglblue.o50:hover { background-color: rgba(111,144,168,1); }
.bgred.o50:hover { background-color: rgba(111,0,43,1); }

/* Circles */
.home-page .circles { position:absolute; }

.circles { padding-top:0; position:relative; z-index:30; padding:10px 0; margin:0 auto; width:100%;}
.circles > .content-wrapper { padding-bottom:0;}
.circles .menu { padding:0; margin:0;}
.circles ul { text-align:center; }
.circles ul li { display:inline-block; }

.circles .item { width:130px; height:130px; position:relative; margin: .2em .5em; color:#FFF; float:left;
	background-repeat:no-repeat; background
	display: block; overflow: auto; 
}

.circles .group .item {  background-position:0 0; }
.circles .group .item:hover { opacity:0.8; }

.circles .item span.text { display:block; text-indent:-100000px; }
.circles .item:hover { text-decoration:none; }

/* hacks */
.content-inner.no-space-top, 
.no-space-top { margin-top:0; padding-top:0;}
.no-space-bottom { margin-bottom:0; padding-bottom:0;}
.space-top { margin-top:1em;}
.content-inner { padding:1em 25px 1em 25px; }
.content-separator { width:100%; position:absolute; top:430px; z-index:20;}
.circles span{ margin:0; padding:0; overflow:hidden; }
.inline { display:inline;}
.block { display:block;}


/* Common text elements */
.title { font-family:'Maven Pro','sans-serif'; text-transform:uppercase; }
a.button-flat { padding:.5em 1em;  text-align:center; }
a.button-flat:hover { text-decoration: none; }

.content { background-color:#FFF; font-weight:100;}
.content h1 { font-size:1.4em; font-weight:100; text-transform: uppercase; margin-bottom:0; padding:1em 25px; }
.content h2 { font-size:1.1em; text-transform:uppercase; margin:.5em 0; font-weight:100 ;}

.content-wrapper { z-index:10; position:relative; margin:0 auto; padding-bottom:40px;}

.content-text a { text-decoration: underline; }
.content-text a.button-flat { text-decoration: none; }

.content-text { line-height:135%; }
.content-text img { width:100%; height:auto;}
.content-text.intro { line-height:150%}
.content-text p, 
.content-text ol, 
.content-text ul { color:rgb(128,128,128); margin:0 0 1em;}
.content-text ol, .content-text ul { padding-left:25px;}


.content-text blockquote {
font: italic 1.1em Georgia, serif;
width: 500px;x
margin: 1.5em 2em;
padding: 0.25em 40px;
position: relative;
color: #383838;
}

.content-text blockquote:before {
display: block;
content: "\201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}

.content-text blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
 
.content-text blockquote cite:before {
content: "\2014 \2009";
}

/* Form */
.form-contact label { text-transform:uppercase; }
.form-contact .text { background:#f5f5f5; }
.form-contact .text:focus,
.form-contact .text:hover{ background-color:#DDD;}

.content .graphic h2 { margin-bottom:1em;}
.btn { display:block; text-align:center; padding:1em 0; }
.btn:hover { text-decoration: none; }
.btn.top { margin-bottom:1em;}

footer article { color:rgb(128,128,128); }
address{ display:inline; font-style:normal}

/* Booking */
.ui-widget { font-family:'Maven Pro'!important; }

.booking { position:absolute; z-index:50; width:100%; background:rgba(255,255,255,0.8); padding:5px 0;
	text-align:center; font-family:'Maven Pro','sans-serif'; font-size:0.8175em; top:0;}
.booking input{ font-family:'Maven Pro','sans-serif'; }
.booking input[name="submit"]{ vertical-align:middle; background:#FFF;}
.booking input[type="text"],
.booking select{ 
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	color:#999; background:#FFF; font-size:0.8125em; padding:.3em 1em!important; height:auto!important; border:0 none;
	border-radius: 0}
.booking select { margin:0 5px;}

.booking form table tr,
.booking form table td { display:inline;}
.booking form[name="showpage"] { display:inline-block; vertical-align:middle; }
.booking p.field { display:inline;}
#ui-datepicker-div { z-index:50;}

/* Widget top Booking */
ul.cal_widget { float:none!important; display:block!important; text-align:center!important; margin:0!important;}
ul.cal_widget label { display:inline; text-transform:uppercase; font-weight:bold; color:rgb(172,161,145); }
ul.cal_widget li { float:none!important; display:inline-block;}
.booking_btn { background:#FFF!important; color:rgb(172,161,145)!important; border-radius:0!important; font-size:1em!important; border:0 none!important;}

#ui-datepicker-div { font-size:0.8175em;}
button.ui-datepicker-trigger { background:none!important;}

/* Contact page */
.contact { font-size:0.9em; text-align:left; }
.contact .vcard p,
.contact .vcard div,
.contact .vcard address { font-style:normal;}
.contact .vcard .adr p, .contact .item { padding:0;  margin:0;}
.contact span.type { }
.single .contact strong { float:left; width:10px;}
.contact strong { padding-right:10px; }
.social .social{display: inline-block; width: auto; vertical-align: top; margin-right:30px;}
.social .social a{display: block; margin:26px 0 19px;}
.social .qual{display: inline-block; width: auto; vertical-align: top;}
.social .qual img{width: 100px;}

/* Wedding and Events */
.menu { padding:1em 0; }
.row .menu:first-child { padding-top:0;}

/* Accommodation */
.acc .content h1.title { display:inline-block; }
.acc .content a.link { display: block; padding:.5em 1em; font-size:1.4em; text-transform:uppercase;}
.acc .content a.link:hover { background-color:rgba(255,255,255,0.2); text-decoration:none; } 

/* Restaurant */
.res .content-text .col strong { color: rgb(111,0,43); }
.res .content-text .col h2 { font-size:2em; color:#CCC; line-height:100%; }

/* Mobile */
@media only screen and (max-width: 640px) {

	#mobile-button {
		position:absolute; z-index:100;

		margin:15px;
		display: block;
		width:40px; height:40px;
		background-repeat:no-repeat;
		background-position:center;
		background-size:70%;
		background-image:url('img/ico_menu.svg');
		border-radius:50%;
	}
	
	#home-page #mobile-button { display:none; }
	#mobile-button { background-color:rgba(0,0,0,0.1);  }
	#mobile-menu {  background-color:#333; }
	
	#mobile-menu { -webkit-transition: ease-in .3s height 0s; }
	#mobile-menu nav {  opacity:0; -webkit-transition: 1s opacity 0s; }
	#mobile-menu.show nav { opacity:1; }

	#mobile-menu { 
		width:100%; height:0;
		position:relative; overflow:hidden; z-index:100; }

	#mobile-menu ul { padding:0; margin:0; font-size:0.9em; line-height:170%; color:#FFF; box-shadow:inset 0px 0px 10px #111}
	#mobile-menu ul a { display: block; padding:.8em 1.6em; line-height:100%; }
	#mobile-menu ul li:first-child a { padding-top:1.9em;}
	#mobile-menu ul li:last-child a{ padding-bottom:1.9em;}

	#mobile-menu ul a:hover { background-color:rgba(0,0,0,0.2); text-decoration:none; }

	body { font-size:1em;}
	.no-mobile { display:none; }
	.form-contact label { background-color:rgb(172,161,145); color:#FFF; text-indent:10px; padding:.5em; }
	.content h2 { margin:1em 0 .5em;}
	.content-text img { max-width:300px; margin:0 auto; display:block;}
	.content-page { top:0px;}
	.content-separator { top:340px;}
	
	#single-flexslider .flex-control-nav,
	.content-wrapper { width:90%; }
	
	.single span.first {display:none;}
	

	.circles .item { background-size:cover; }
	.circles { padding-bottom:0;}
	.circles .menu { padding-top:55px; }
	.single .circles ul li { display:inline; }
	.single .circles .group,
	.single .circles .group .item { width:130px; height:130px; }
	.single .circles .group { display:block; margin:0 auto;}
	.single .circles .group .item { margin:0; display:none;}
	.single .circles .group .item.active { display:block;}

	.single .mobile-booking { display:none;}
	.mobile-booking { position:absolute; width:100%; top:0; z-index:30; }
	.mobile-booking a { display:block; text-align: center; width:100%;  background-color:rgba(255,255,255,.8); height:40px; line-height:40px; }
	.mobile-booking a:hover { background-color:rgba(255,255,255,0.7); text-decoration: none}
	.wrapper:not(.home-page) .circles a:not(.active){ display:none;}
	.map { margin-top:20px;}

	.home-page .circles ul.menu { width:81%; margin:0 auto; }
	.home-page .circles ul li { display:inline; }
	.home-page .circles .item { width:100px; height:100px; }
	.home-page .circles .item.acc { background-image:url('img/home-li_acc.svg'); }
	.home-page .circles .item.wed { background-image:url('img/home-li_wed.svg'); }
	.home-page .circles .item.eve { background-image:url('img/home-li_eve.svg'); }
	.home-page .circles .item.res { background-image:url('img/home-li_res.svg'); }

	.circles .item.hom { background-image:url('img/li_braxmere.svg'); }
	.no-svg .circles .item.hom { background-image:url('img/li_braxmere.png'); }
	.circles .item.acc { background-image:url('img/li_acc.svg'); }
	.no-svg .circles .item.acc { background-image:url('img/li_acc.png'); }
	.circles .item.wed { background-image:url('img/li_wed.svg'); }
	.no-svg .circles .item.wed { background-image:url('img/li_wed.png'); }
	.circles .item.eve { background-image:url('img/li_eve.svg'); }
	.no-svg .circles .item.eve { background-image:url('img/li_eve.png'); }
	.circles .item.res { background-image:url('img/li_res.svg'); }
	.no-svg .circles .item.res { background-image:url('img/li_res.png'); }
	.circles .item.con { background-image:url('img/li_con.svg'); background-position:0 0; }
	.no-svg .circles .item.con { background-image:url('img/li_con.png'); background-position:0 0; }

}


/* No mobile screen */
@media only screen and (min-width:641px) {
	.mobile { display:none; }
	.space-top-nomobile { margin-top:25px;}
	
	/* Common items */
	.content .title { color:#FFF; padding:.5em 1em;}
	
	#single-flexslider .flex-control-nav,
	.content-wrapper { max-width:86%;}
	.content-page { top:0px; }
	
	.home-page.wrapper { position:relative; width:100%; min-height:750px; }
	.home-page .circles { padding-top:75px;}
	.home-page .circles .content-wrapper { padding-bottom:0; height:100%; margin-top:0;}
	.home-page .circles .item { margin:0 20px;}
	.home-page .circles .group { display:block; width:100%; position:absolute; bottom:0px; }

	.home-page footer { z-index:30; position:relative; background:#FFF; width:100%;}
	.home-page footer .hcard { float:none; width:100%; text-align: center; padding-bottom:1em;}
	.home-page footer .hcard .adr { padding-right:20px;}
	.home-page footer .sub-nav { text-align:center; padding-bottom:2em; }
	.home-page footer .sub-nav li { padding:0 1em;}


	.circles > .content-wrapper { margin-top:55px;}
	.circles .item.hom { background-image:url('img/li_braxmere.png'); width:170px; height:170px; background-size:cover;}
	.circles .item.acc { background-image:url('img/li_acc.png'); }
	.circles .item.wed { background-image:url('img/li_wed.png'); }
	.circles .item.eve { background-image:url('img/li_eve.png'); }
	.circles .item.res { background-image:url('img/li_res.png'); }
	.circles .item.con { background-image:url('img/li_con.png'); }


	.single .circles .group { padding-top:1em;}
	.single .circles .group .item { width:93px; height:93px; background-size:cover; background-repeat:no-repeat; }
	.single .circles .group .item.con { background-position:0 0; }
	.no-svg .single .circles .group .item { height:5.7em;}
	.single .circles .first .item { width:130px; height:130px; background-size:cover; margin:0;}
	.brown .title { background-color: rgb(172,161,145); }
	.blue .title { background-color: rgb(0,53,88); }
	.green .title { background-color: rgb(159,187,174); }
	.lblue .title { background-color: rgb(111,144,168); }
	.red .title { background-color: rgb(111,0,43); }


	/* Contact page */
	.map { float:right; width:55%; padding-right:2em; padding-bottom:2em;}
	.vcard { float:left; width:36%;}

	
	.span34 { width:74%; float:left; margin-right:1%;}
	.span14 { width:25%; float:left; }

	.res .span34 { width:53%; }
	.res .span14 { float:right;}
	.res .col { width:47%; float:left; margin-right:6%;}
	.res .col.two { margin-right:0; }

	.content .row { width:29%; margin:0 3%; float:left;}
	.content .half:first-child { margin-right:2%;} 
	.content .third.row { width:29%; float:left;  margin:0 10px;}
	.content .first.row { margin-left:0; }
	.content .third.row { margin-right:0; }

}

/* Just for normal screen */
@media only screen and (max-width: 890px) {
	.single .circles span.first,
	.single .circles span.group { display:block; }
	.single .circles span.group { margin-top:0px;}
}

@media only screen and (min-width: 891px){
	.single .circles span.group { display:block; float:right; }
	.single .circles span.first { float:left; display:block; }
}

/* Super big screen */
@media only screen and (min-width: 1140px) {
	#single-flexslider .flex-control-nav,
	.content-wrapper { max-width:960px;}
}