/*
Theme Name: Select Custom Joinery
Theme URI: http://www.canberraweb.com.au
Author: Yavisht Katgara
Author URI: https://au.linkedin.com/in/yavisht
Description: This is a custom theme developed by WordPress Ninjs's at Canberra Web.
Version: 1.1.9
License: GNU General Public License v3.0 /
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: gray, light, two-columns, right-sidebar, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-images, flexible-header, sticky-post,  theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

This theme is the most seamless and minimalistic integration of Twitter Bootstrap Framework into
the _s starter theme from Automattic, the guys behind WordPress.

_s (or Underscores) http://underscores.me/, (C) 2012-2013 Automattic, Inc. Twitter Bootstrap

Credits:

1. Bootstrap

 * Bootstrap v3.3.1 (http://getbootstrap.com)
 * Copyright 2011-2014 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

 * Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=f58353a31151a8c05d7c)
 * Config saved to config.json and https://gist.github.com/f58353a31151a8c05d7c

2. wp_bootstrap_navwalker

* Class Name: wp_bootstrap_navwalker
* GitHub URI: https://github.com/twittem/wp-bootstrap-navwalker

3. Glyphicons

 * http://getbootstrap.com/components/

*/

/* My Minimal WordPress Styling comes here */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
/* This is a small security for too long strings titles */
body {
	word-wrap: break-word;
	font-family: 'Open Sans', sans-serif;
	background:#eeeeee;
	color:#000;
}
.container,
.container-fluid{background:#fff;}
a {
    color: #000;
    text-decoration: none !important;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
padding-left: 5px;
padding-right: 5px;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    text-transform: uppercase;
}
h1, .h1 {
    font-size: 22px;
	clear:both;
}
a:hover, a:focus {
    color: #C94904;
}
/* Alignment */
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}
.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}
.aligncenter {
	clear: both;
	display: block;
	margin: 0 auto;
}
.btn-primary {
    background-color: #C94904;
    border-color: #C94904;
    color: #fff;
}

/* Images and wp-captions should always fit and be responsive */
img {
	display: inline-block;
	height: auto;
	max-width: 100%;
}
img[class*="wp-image-"] {
	margin-top: 10px;
	margin-bottom: 10px;
}
.wp-caption {
	border: 1px solid #ccc;
	margin-bottom: 10px;
	max-width: 100%;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 0 10px;
}
.wp-caption.aligncenter {
	margin-bottom: 10px;
}
.wp-caption img[class*="wp-image-"] {
	display: block;
}
.wp-caption .wp-caption-text {
	text-align: center;
	margin-top: 10px;
}

/* WP Gallery */
.gallery {
	margin-bottom: 1.5em;
}
.gallery a img {
	border: none;
	height: auto;
	max-width: 90%;
}
.gallery dd {
	margin: 0;
}
.gallery-caption {
	display: block;
}

/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
	max-width: 100%;
}


/* Text meant only for screen readers */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar */
}


/* Content */
.main-content-inner {
	padding-bottom: 1.5em;
}
.hentry {
	margin: 0 0 1.5em;
}
.sticky {
	display: block;
}
.bypostauthor {
	display: block;
}


/* Clearing */
.clear {
	clear: both;
}

/* Navigation */

.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:active>.dropdown-menu, .dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:active>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}


/* Here some needed widget styles
 * Most widgets are adapted in the file bootstrap-wp.js - and REALLY easy to modify! ;) */
.widget { margin-bottom: 2em; }
.widget_nav_menu ul.sub-menu li, .widget_pages ul.children li { padding-left: 15px; }

/* Hiding the search widget's button in widgets. thats just too old-skool. :) but if you want it back, just delete the next line.
 * Note: you can change the whole appearance of the search_form() function in our searchform.php */
.widget_search .search-form input[type="submit"] { display: none; }

/* Make sure select elements fit in widgets */
.widget select {
	max-width: 100%;
}

/* Nested comments? They are threaded and nested already, you just need to add your own styling to finalize!
 * For example with some margin, like the line below ;) Delete, modify, change classes in HTML if you desire another style */
 .comment .children { margin-left: 1.5em; }

/**
* Some WP Theme Repository requirements
*/

.sticky {
}

.gallery-caption {

}

.bypostauthor {

}

.entry-meta {
	clear: both;
}


/*My custom CSS starts here*/
.site-header-inner{padding:0 20px;}
.social{padding:0 20px;}
.nopadding{padding:0 !important;}
.nomargin{margin:0 !important;}
.navbar .navbar-nav {
    display: inline-block;
    float: none;
	position: relative;
    top: 4px;
}
.navbar .navbar-collapse {
    text-align: center;
}
.navbar{margin-bottom:0;}
.nav > li {
    top: 7px;
}
.navbar-default .navbar-nav > li > a {
    text-transform: uppercase;
	font-weight:700;
	color:#000;
	font-size:15px;
}
.navbar-default {
    background-color: transparent;
    border: medium none;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    background:none;
    color: #C94904;
}
.shadowmenu{-webkit-box-shadow: 0 0 15px 0px rgba(163, 163, 163, 0.4);
-moz-box-shadow: 0 0 15px 0px rgba(163, 163, 163, 0.4);
box-shadow: 0 0 15px 0px rgba(163, 163, 163, 0.4);}

.shadowcontainer{-webkit-box-shadow: 0 10px 15px 0 rgba(163, 163, 163, 0.4);
-moz-box-shadow: 0 10px 15px 0 rgba(163, 163, 163, 0.4);
box-shadow: 0 10px 15px 0 rgba(163, 163, 163, 0.4);}

.shadowheader{-webkit-box-shadow: 0 -15px 20px 0px rgba(163, 163, 163, 0.4);
-moz-box-shadow: 0 -15px 20px 0px rgba(163, 163, 163, 0.4);
box-shadow: 0 -15px 20px 0px rgba(163, 163, 163, 0.4);}
.entry-content{font-size:18px;}
.site-navigation-inner{padding:0;}
.socialicons {
    margin-top: 55px;
}
.socialicons p{font-weight:700;font-size:15px;color:#000;}
.brownbox{background:#3f3530;}
.orangebox{background:#c55027;}
.slider{padding-bottom:0;}
.subtitle{font-weight:600;color:#000;text-transform:uppercase;font-size:26px;margin-top:60px;margin-bottom:40px;}
.type a{text-transform: uppercase;
	font-weight:700;
	color:#000;
	font-size:15px;}
.push{margin-bottom:10px;}
.homepagetext{font-weight:300;font-size:30px;color:white;margin-top:60px;}
.logo{width:244px;
height:116px;margin-top:30px;}
.row.no-gutters {
  
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
  padding-right: 0;
  padding-left: 0;
}
.ms-skin-default .ms-nav-next{
	background-image: url("img/arrowright.png") !important;
	background-position: 0 center !important;
    height: 50px !important;
    right: 0px !important;
    width: 38px !important;
	margin-top: -30px !important;
}
.ms-skin-default .ms-nav-prev {
    background-image: url("img/arrowleft.png") !important;
    background-position: 0 center !important;
    height: 50px !important;
    left: 0 !important;
    width: 38px !important;
	margin-top: -30px !important;
}

.home .holder {
    padding: 30px 60px 0px;
}
.home .fixheight {
    height: 140px;
    margin-bottom: 195px;
}
.page-template-about .holder {
    padding: 15px 50px;
}
.page-template-about .fixheight{height:auto;margin-bottom:12px;}

.page-template-eco-friendly .holder {
    padding: 15px 50px;
}
.page-template-eco-friendly .fixheight{height:auto;margin-bottom:12px;}
.more-link {
    background: #c94904 none repeat scroll 0 0;
    border-radius: 25px;
    color: white !important;
    float: right;
    margin: 20px 0;
    padding: 10px;
}
hr{border:1px solid black;max-width: 345px;}
.site-info{background:#f4f4f4;
-webkit-box-shadow: inset 0px 0px 25px -4px rgba(163,163,163,0.4);
-moz-box-shadow: inset 0px 0px 25px -4px rgba(163,163,163,0.4);
box-shadow: inset 0px 0px 25px -4px rgba(163,163,163,0.4);
float: left;
height: 100%;
padding: 0 40px;
width: 100%;
}
.site-info .socialicons{margin:0;}
.site-info .links {
    margin:40px 0px;
}
.copyright span{padding:15px;}
/*==========  HOVER EFFECT  ==========*/
.grid figure {
    cursor: pointer;
    overflow: hidden;
    position: relative;
	margin-bottom:10px;
}

.grid figure img {
	position: relative;
	display: block;

}

.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
}

.grid figure h2 span {
	font-weight: 800;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}

/*---------------*/
/***** Zoe *****/
/*---------------*/

figure.effect-zoe figcaption {
	top: auto;
	bottom: 0;
	padding: 1em;
	height: 3.75em;
	background: #fff;
	color: #3c4a50;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
}

figure.effect-zoe h2 {
	float: left;
}

figure.effect-zoe p.icon-links a {
    color: #000;
    float: right;
    font-size: 13px;
    position: relative;
	text-decoration:none !important;
    top: 5px;
}

figure.effect-zoe:hover p.icon-links a:hover,
figure.effect-zoe:hover p.icon-links a:focus {
	color: #252d31;
}

figure.effect-zoe p.description {
background: #fff;
    bottom: 5em;
    color: #000;
    font-size: 90%;
    left: 0;
    padding: 15px;
    position: absolute;
	opacity: 0;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
	-webkit-backface-visibility: hidden; /* Fix for Chrome 37.0.2062.120 (Mac) */
}

figure.effect-zoe h2,
figure.effect-zoe p.icon-links a {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,200%,0);
	transform: translate3d(0,200%,0);
}

figure.effect-zoe p.icon-links a span::before {
	display: inline-block;
	padding: 8px 10px;
	/*font-family: 'feathericons';*/
	speak: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-eye::before {
	/*content: '\e000'*/;
}

.icon-paper-clip::before {
	content: '\e001';
}

.icon-heart::before {
	content: '\e024';
}

figure.effect-zoe h2 {
    font-size: 17px;
    font-weight: 600;
	position:relative;
	top:10px;
}

figure.effect-zoe:hover p.description {
	opacity: 1;
}

figure.effect-zoe:hover figcaption,
figure.effect-zoe:hover h2,
figure.effect-zoe:hover p.icon-links a {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-zoe:hover h2 {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.effect-zoe:hover p.icon-links a:nth-child(3) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

figure.effect-zoe:hover p.icon-links a:nth-child(2) {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

figure.effect-zoe:hover p.icon-links a:first-child {
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}
.banner {
    background-image: url("img/banner.jpg");
    padding-bottom: 50px;
    padding-top: 50px;
}
.banner h1 {
    color: #000;
    font-size: 45px;
    font-weight: 300;
    padding-right: 20px;
    text-align: right;
}
*, *:before, *:after {box-sizing:  border-box !important;}


.masonry {
 -moz-column-width: 18em;
 -webkit-column-width: 18em;
 -moz-column-gap: 1em;
 -webkit-column-gap:1em; 
  
}

.item {
 display: inline-block;
 padding:  .25rem;
 width:  100%; 
}

.well {
 position:relative;
 display: block;
 background:transparent;
 border:medium none;
 box-shadow:none;
 margin:0;
 padding:0px;
}
.photoswipe_gallery{float:right !important;}
/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
.holder {padding: 5px 60px 0px;}
.fixheight {margin-bottom: 126px;}
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
.holder {padding: 70px 60px 0px;}
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
.fixheight {height:auto;}
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
.fixheight {height:auto;}
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
.fixheight {height:auto;}
}