@charset "UTF-8";
/*
Theme Name: Woodbeams
Theme URI: https://woodbeams.ca
Author: Oops! Design
Author URI: https://wordpress.org/
Description: From the Woodbeams website, set to Wordpress.
Requires at least: 4.9.6
Requires PHP: 5.2.4
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: woodbeams
Tags: 
*/

@font-face {
    font-family: 'MuseoSans500Regular';
    src: url('fonts/museosans_500-webfont.eot');
    src: url('fonts/museosans_500-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/museosans_500-webfont.woff') format('woff'),
         url('fonts/museosans_500-webfont.ttf') format('truetype'),
         url('fonts/museosans_500-webfont.svg#MuseoSans500Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MuseoSans500Italic';
    src: url('fonts/museosans_500_italic-webfont.eot');
    src: url('fonts/museosans_500_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/museosans_500_italic-webfont.woff') format('woff'),
         url('fonts/museosans_500_italic-webfont.ttf') format('truetype'),
         url('fonts/museosans_500_italic-webfont.svg#MuseoSans500Italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

* { box-sizing: border-box; }
html,
body { width: 100%; height: 100%; margin: 0; padding: 0; overflow-x: hidden; }
body { font-family:'MuseoSans500Regular', Arial,sans-serif; color: #333; font-size: 18px; font-weight: 400; line-height: 1.5; }
.clearfix { clear: both; }
.screen-reader-text { display: none; }
.svg-icon { color: inherit; }
.hidden { display: none; }
.noscroll { overflow: hidden; }
body.noscroll { padding-right: 17px; }

/* menu */
.site-header { z-index: 1000; }
.top-nav-holder { width: 100%; position: relative; background-color: #4f2100; }
.main-navigation-left { width: 40%; width: calc(50% - 170px); float: left; position: relative; text-align: right; background-color: #4f2100; margin: 0; padding: 0 20px 0 0; }
.right-side-nav-holder { width: 40%; width: calc(50% - 170px); float: right; position: relative; text-align: left; background-color: #4f2100; margin: 0; padding: 0 0 0 20px; }
.main-navigation-right,
.social-navigation { display: inline-block; }
.social-navigation { margin: 0; }
ul.main-menu,
ul.social-links-menu { list-style-type: none; position: relative; margin: 0; }
ul.main-menu {  padding: 15px 0; }
ul.social-links-menu { padding: 0 0 0 15px; }
ul.main-menu li,
ul.social-links-menu li { display: inline-block; }
ul.main-menu li a { font-size: 18px; line-height: 1; padding: 15px 10px; color: #fff; text-decoration: none; text-transform: lowercase; transition: padding 0.5s ease, font-size 0.5s ease; }
ul.social-links-menu li { width: 24px; height: 24px; padding: 0; margin: 0 10px 0 0; transition: margin 0.5s ease }
ul.social-links-menu li:last-child { margin: 0; }
ul.social-links-menu li a { display: block; position: absolute; top: 5px; width: 24px; height: 24px; background-size: contain; background-repeat: no-repeat; }
.facebook-icon a { background-image: url(images/fb.png); }
.pinterest-icon a { background-image: url(images/pin.png); }
.houzz-icon a { background-image: url(images/houzz.png); }
.instagram-icon a { background-image: url(images/instagram.png); }
.facebook-icon .svg-icon,
.pinterest-icon .svg-icon,
.houzz-icon .svg-icon,
.instagram-icon .svg-icon { display: none; }

@media screen and (max-width: 1100px) {
	ul.main-menu li a { font-size: 16px; padding: 16px 5px; }
	ul.social-links-menu li { margin: 0 5px 0 0; }
}
@media screen and (max-width: 1000px) {
	.top-nav-holder { display: none; }
}

/* logo */
.logoContainer { position: absolute; width: 340px; height: 139px; background-color:#fff; top:0; left: 50%; transform: translateX(-50%); z-index: 1001; }
.logoHolder { margin: 18px 0 10px 0; border-bottom: thin solid #754200; padding-bottom: 17px; text-align: center; line-height: 1; font-size: 0; }
.logoContainer h1 { color: #333; font-size: 13px; font-weight: 500; padding: 0; margin: 0; line-height: 1; }

/* mobile menu */
.mobile-nav-holder { width: 100%; height: 145px; background-color: #fff; position: relative; display: none; z-index: 1000; }
.mobile-nav-holder,
#mobile-menu { position: relative; }
.mobile-menu-btn { position: absolute; bottom: 10px; right: 20px; text-align: right; }
.mobile-menu-btn a { color: #4f2100; width: 45px; padding: 10px; float: right; }
.bar1, .bar2, .bar3 { width: 25px; height: 4px; border-radius: 2px; background-color: #4f2100; margin: 4px 0; transition: 0.4s; }
.mobile-navigation { position: absolute; top: 145px; left: 0px; display: block; z-index: 10000; background-color: #fff; width: 100%; padding: 0 20px; display: none; }
#menu-mobile-menu { list-style-type: none; position: relative; margin: 0; padding: 20px 0; }
#menu-mobile-menu li { border-bottom: 1px solid #754200; text-align: center; width: 100%; padding: 10px 0; position: relative; }
#menu-mobile-menu li:last-child { border-bottom: none; }
#menu-mobile-menu li a { color: #754200; display:inline-block; width:100%; height:100%; }

@media screen and (max-width: 1000px) {
	.mobile-nav-holder { display: block; }
}

/* logo mobile */
.logoContainer-mobile { position: absolute; max-width: 350px; width: 50%; height: auto; top:0; left: 0; z-index: 1001; padding: 10px 0 0 20px; }
.logoContainer-mobile img { width: 100%; max-width: 260px; }
.logoContainer-mobile .logoHolder { margin: 0 0 10px 0; padding: 10px; }
.logoContainer-mobile h1 { color: #333; font-size: 13px; font-weight: 500; padding: 0; margin: 0; line-height: 1; }

/* content */
.site-content { position: relative; height: 100%; height: calc(100% - 57px); min-height: 100vh; min-height: calc(100vh - 88px); }

@media screen and (max-width: 1000px) {
	.site-content { height: 100%; min-height: 100vh; min-height: calc(100vh - 176px); }
}

/* home tabs */
#imageStretcher { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; }
.tabHolder { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index:6; display: flex; }
.tab1,.tab2,.tab3,.tab3_2,.info1 { background-color: #fff; opacity: 0.95; height: 118px; margin-right: 5px; float: left; transition: width 0.5s ease, height 0.5s ease; }
.tab1 {width:314px}
.tab2,
.tab3 {width:341px}
.tab3_2 {width:278px; margin: 0;}
.innerTab { width: 100%; height: 103px; border-bottom: #754200 solid 5px; transition: height 0.5s ease, border-bottom 0.5s ease; }
.info1 { position: absolute; bottom: 123px; overflow-y: auto; width: 100%; max-height: 50vh !important; max-height: calc(63vh - 50px) !important; opacity: 0; transition: opacity 0.5s ease; }
.showing { opacity: 0.95; }
.closeBtn {position:absolute;right:15px;top:10px;z-index:6}
.infoTextHolder { position: relative; padding: 25px 30px 5px 30px; font-size: 16px; color: #333; font-weight: 400; line-height: 1.5; transition: font-size 0.5s ease; }
.newsBtn {position:absolute;bottom:39px;right:0;z-index:9}
.newsHolder {width:1px;height:118px;background-color:#fff;position:absolute;bottom:39px;right:37px;z-index:7}
.innerNewsHolder {border-left:#754200 solid 5px;margin-left:10px;width:1px;height:118px;float:left;opacity:0;z-index:8}
.newsText {padding:0 140px;height:100%}
.newsHR {width:50px;margin:15px 0;border-color:#754200}

@media screen and (max-width: 1300px) {
	.tabHolder { width: 100%; padding: 0 20px; }
	.tab1,
	.tab2,
	.tab3,
	.tab3_2 { width: 25%; }
	.info1 { width: 100%; width: calc(100% - 40px); }
}
@media screen and (max-width: 1150px) {
	.innerTab h1 { font-size: 20px; font-size: 2.17vw !important; }
}
@media screen and (max-width: 800px) {
	.innerTab h1 { font-size: 18px !important; }
}
@media screen and (max-width: 600px) {
	.tabHolder { flex-wrap: wrap; }
	.info1 {bottom: 275px; max-height: 30vh !important; }
	.tab1,
	.tab2,
	.tab3,
	.tab3_2 { width: 100%; margin: 0 0 5px 0; height: 85px; }
	.info1 { width: 100%; width: calc(100% - 40px); }
	.innerTab { height: 80px; border-bottom:#754200 solid 3px; }
	.infoTextHolder { font-size: 14px; }
}

/* positioning */
.centerVert {height:100%;width:100%;text-align:center}
.centerVert h1,.centerVert h2 { font-size: 25px; color: #333; font-weight: 500; transition: font-size 0.5s ease; }
.centerVert h2 {font-size:15px}
.centerVert .table {height:100%;width:100%;display:table}
.centerVert .table-cell {display: table-cell;vertical-align: middle}

@media screen and (max-width: 750px) {
	.centerVert h1,
	.centerVert h2 { font-size: 3.3vw; }
}
@media screen and (max-width: 600px) {
	.centerVert h1,
	.centerVert h2 { font-size: 18px; }
}

/* buttons */
.rollBtn,.rollBtn2,.rollBtn3,.closeBtn img {cursor:pointer}
.socialMediaHolder {position:absolute;right:0px;top:0px;padding-top:5px}
.socialBtn {margin-left:6px;margin-right:10px;float:left}
/* texts */
.footerText,.footerText a {font-size:10px;color:#fff;font-weight:500}
.leftBox h1,.titleHolder h1 { font-size: 25px; color:#333; font-weight:500; margin: 0 0 20px; line-height:27px; }
.column h1 {font-size:18px;color:#333;font-weight:500}
.column h2 {font-size:14px;color:#333;font-weight:bold;line-height:20px}
/* secondary page layout */
.box-container { position: relative; width: auto; display: inline-block; min-width: 981px; left: 50%; transform: translateX(-50%); z-index: 900; padding: 150px 0 50px 0; transition: padding 0.5s ease, top 0.5s ease; margin: 0 auto; }
.leftBox {position:relative; width:315px; float: left; margin: 0 6px 0 0; background-color:#fff; opacity:0.9; z-index:5; font-size: 16px; color:#333; font-weight:500; line-height:20px; }
.rightBox {position:relative; width:660px; float: left; background-color:#fff; opacity:0.9; z-index:5}
.innerLeft {position:relative; width:297px; border-left: #754200 solid 5px; padding: 30px; margin-left: 20px; transition: width 0.5s ease, border-left 0.5s ease, margin 0.5s ease; }
.innerRight {position:relative; width: 665px; border-bottom:#754200 solid 5px; padding:30px; margin-bottom: 10px; transition: width 0.5s ease, border-left 0.5s ease, margin 0.5s ease; }
.titleHolder {position:relative;width:100%;}
.column {position:relative;width:280px;float:left;font-size:14px;color:#333;font-weight:500;line-height:20px}
.column1,.column2 {position:relative;width:280px;float:left;font-size:16px;color:#333;font-weight:500;line-height:20px;margin-right:40px}
.column2 {margin-right:0px}
.beamImageHolders {float:right}

@media screen and (max-width: 1000px) {
	.box-container { padding: 20px; min-width: 0; width: 100%; }
	.leftBox { width: 100%; margin: 0 0 6px 0; }
	.rightBox { width: 100%; }
	.innerLeft { width: 90%; width: calc(100% - 25px); }
	.innerRight { border-left: #754200 solid 5px; margin-left: 20px; width: 90%; width: calc(100% - 25px); }
	.column1 { width: 50%; margin: 0; padding: 0 20px 0 0; }
	.column2 { width: 50%; margin: 0; padding: 0 0 0 20px; }
}
@media screen and (max-width: 700px) {
	.column1 { width: 100%; margin: 0; padding: 0; }
	.column2 { width: 100%; margin: 0; padding: 0; }
}
@media screen and (max-width: 500px) {
	.innerLeft, 
	.innerRight { border-left: none; margin-left: 0; width: 100%; }
}

/* contact page */
.tabsHolder { display: flex; position: absolute; justify-content: center; width: 100%; bottom: 39px; }
.tab4,.tab5 {background-color:#fff;float:left}
.tab4 {margin-right:5px;margin-top:5px;float:none;display:inline-block}
.contact-img1 {float:left;margin-right:5px;display:block}
.contact-img2 {display:none}
.innerTab2 {padding:5px 30px 5px 30px;border-bottom:#754200 solid 5px;margin-bottom:10px;text-align:left}
.contact-form-holder { position: fixed; top: 0px; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.75); z-index: 1002; }
.contact-form { position: absolute; background-color: #f4f4f4; top: 50%; left: 5%; transform: translateY(-50%); width: 90%; }
.contact-form * { font-size: 1em; }
#contact-form * { float:left}
#contact-form > div { width: 48%; margin-left:1%; margin-right:1%; margin-top:1%; }
#contact-form > #text-area { width: 98%; }
#contact-form input { width: 100%; padding:.2em;padding-top:.4em;padding-bottom:.4em;margin:0px;border:.1em solid #bbb}
#contact-form select {border:.1em solid #bbb;background-color:#fff;-webkit-appearance:none;-moz-appearance:none;padding:.2em;border-radius:0px;width:100%;padding-top:.4em;padding-bottom:.4em}
#contact-form textarea{border:.1em solid #bbb;min-width:100%;width:100%;max-width:100%;min-height:5em;height:5em;max-height:5em;}
#contact-form > button{margin:1%;-webkit-appearance:none;-moz-appearance:none;padding:.4em;background-color:#752400;color:white;border:.2em solid #752400;transition:.2s}
#contact-form > button:hover, #contact-form > button:active, #contact-form > button:focus{background-color:#fff;color:#752400;transition:.2s}
#contact-form .alert{margin-top:1.2em}
.contact{min-height:800px;}
.contact#imageStretcher{background-image:url('images/backgrounds/woodbeam-contact.jpg');position:absolute;min-height:800px;z-index:-666;background-repeat:no-repeat;background-size:cover}

@media screen and (max-width: 1300px) {
	.tabsHolder { position: relative; padding: 150px 0 0 0; width:100%;  justify-content: center; flex-wrap: wrap; }
	.tab4 { margin: 5px; width: 250px; }
}
@media screen and (max-width: 1000px) {
	.tabsHolder { padding: 100px 0 0 0; }
}

/* gallery page */
.gallery-container { display: flex; flex-wrap: wrap; position: relative; width: 100%; padding: 100px 10%; z-index: 900; transition: padding 0.5s ease; }
.beam-holder { width: 24%; float: left; position: relative; margin: 0 0.5% 1% 0.5%; font-size: 0; line-height: 1; transition: width 0.5s ease, margin 0.5s ease; }
.beamTitle { position: absolute; bottom: 0px; text-align: center; width: 100%; height: 30px; background-color: #887f6f; opacity: 0.8; padding-top: 5px; }

@media screen and (max-width: 1350px) {
	.beam-holder { width: 32%; }
}
@media screen and (max-width: 1000px) {
	.gallery-container { padding: 20px 20px 40px 20px; }
	.beam-holder { width: 48%; margin: 0 1% 2% 1%;  }
}
@media screen and (max-width: 500px) {
	.beam-holder { width: 100%; margin: 0 0 10px 0;  }
}

/* gallery images page */
/* page slider */
.slider-holder { position: relative; padding: 120px 0; z-index: 900 !important; text-align: center; transition: padding 0.5s ease; }
.slider-holder h2 { padding: 0 0 30px 0; z-index: 900 !important; }
.swiper-container { width: 100%; height: 70vh; max-height: 70vh; }
.swiper-slide { text-align: center; font-size: 18px; background: transparent; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; width: 60%; position: relative; }
.swiper-slide img { max-width: 100%; max-height: 750px; }
.swiper-button-next, .swiper-button-prev { color: #333 !important; } 
.swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 20px !important; }
.swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 20px !important; }

@media screen and (max-width: 1000px) {
	.slider-holder { padding: 30px 0; }
}

/* texts */
h1, h2, h3, h4 { margin: 0; }
a { text-decoration: none; }

.footer-holder { width: 100%; padding: 10px 20px; background-color: rgba(75, 30, 2, 0.85); text-align: center }
.footer-holder p,
.footer-holder a { margin: 0; padding: 0; line-height: 1; color: #fff; font-size: 11px; }
.leftBox h1,.titleHolder h1 {font-size:25px;margin-bottom:15px;line-height:27px}
.leftBox h2 {font-size:18px;line-height:27px;margin-bottom:5px;font-weight:normal;color:#887f6f;}
.leftBox a {color:#333;}
.column a,.innerTab2 a {color:#754200;}
.column a:hover,.leftBox a:hover,.innerTab2 a:hover {color:#887f6f;}
.column h1 {font-size:18px;}
.column h2 {font-size:14px;font-weight:bold;line-height:20px;margin-bottom:15px}
.column ul {list-style:none;margin:0 0 15px 0;padding:0}
.column ul li {background:url(images/bullet.png) no-repeat 0 11px;padding-left:11px;}
.column ul li.pdf {background:url(images/pdf-icon.png) no-repeat 0 2px;padding-left:17px;}
.tab4 h1, .contact-form h1 {text-align:left;padding-left:30px;font-size: 1.1rem;color:#986937;border-bottom:.25em solid #754200;padding-bottom:.5em;padding-top:.5em}
.innerTab2 h2 {font-size:1rem;font-weight:normal;}
.innerTab2 h3 {font-size:.9rem}
.innerTab2 h4 {color:#777;margin-bottom:.6rem;margin-top:.7rem;font-size:.8rem}
.innerTab2 {font-size:14px}
.innerTab2 a {font-size:12px}
.beamTitle h1 {font-size:18px;color:#fff;font-weight:normal}
.contact-form label{font-size:.8em;margin-bottom:.2em}
.innerNewsHolder h1 {font-size:18px}

.column1 a,.column2 a,.innerTab2 a {color:#754200;}
.column1 a:hover,.column2 a:hover,.leftBox a:hover,.innerTab2 a:hover {color:#887f6f;}
.column1 h1,.column2 h1 {font-size:18px;}
.column1 h2,.column2 h2 {font-size:18px;font-weight:bold;line-height:1.5;margin-bottom:5px}
.column1 ul,.column2 ul {list-style:none;margin:0 0 15px 0;padding:0}
.column1 ul li,.column2 ul li {background:url(images/bullet.png) no-repeat 0 11px;padding-left:11px;}
.column1 ul li.pdf,.column2 ul li.pdf {background:url(images/pdf-icon.png) no-repeat 0 2px;padding-left:17px;}

/*@media screen and (max-width: 990px) {
	html,body {height:100%;width:100%;min-width:300px;}
	.leftBox {position:relative;width:100%;top:140px}
	.rightBox {position:relative;margin:0;width:100%;left:0;padding-bottom:10px;top:140px}
	.innerLeft {position:relative;width:calc(100% - 85px);border-left:#754200 solid 5px;padding:30px 30px 10px 30px;margin-left:20px}
	.innerRight {position:relative;width:calc(100% - 85px);border-bottom:#754200 solid 5px;margin-bottom:10px;border-left:#754200 solid 5px;padding:10px 30px 30px 30px;margin-left:20px}
   	.column1,.column2 {margin-right:0px;width:100%;float:none}
	#imageStretcher {position:absolute;top:0;left:0;height:100%;width:100%;z-index:1;min-width:300px;}
	.topBar {position:absolute;top:0;left:0;width:100%;height:48px;background-color:#4f2100;z-index:2;min-width:300px;}
	.bottomBar {display:none}
	.footer {position:relative;height:39px;background-color:#4b1e02;opacity:1;min-width:300px;text-align:center;width:100%;z-index:1000;margin-top:150px}
	.container {position:relative;padding:0;margin:0 auto;z-index:5;min-width:300px;}
	.page {position:relative;margin:0 auto;width:100%;height:auto;z-index:5}
	.logoContainer {position:absolute;width:100%;height:140px;background-color:#fff;top:0;left:0;z-index:6;text-align:center;}
	.menuHolder {display:none}
	.resp-menu {display:block;position:relative;top:140px;z-index:11}
	.socialMediaHolder {position:absolute;right:0px;top:0px;padding-top:5px}
	.galleryHolder {position:relative;left:10px;width:calc(100% - 52px)}
	.gallery {max-width:766px;width:calc(100% - 45px);height:auto;position:relative;text-align:center}
	.mainImage #main img,.mainImage {width:100%;height:auto;}
	.thumbHolder {overflow:hidden;position:relative;width:100%}
	.tabHolder {position:relative;top:140px;left:0;z-index:6}
	.tab1,.tab2,.tab3,.info1 {width:100%;margin:0 0 5px 0}
	.info1 {position:relative;top:5px;padding:0}
	.newsBtn {clear:left;position:relative;margin-top:140px;bottom:0px;left:0;z-index:9}
	.newsHolder {width:100%;height:1px;position:absolute;bottom:39px;left:0px;z-index:10;}
	.innerNewsHolder {border-left:#754200 solid 5px;margin-left:0px;width:100%;height:1px;opacity:0;z-index:8;overflow-y:auto}
	.newsText {padding:20px;height:100%;}
	.closeBtn {position:absolute;right:20px;top:10px;z-index:6}
	.tabHolder2 {position:relative;width:100%;top:140px;left:0;z-index:6;text-align:center}
	.tabsHolder {width:100%;margin:0 auto}
	.tab4,.tab5 {background-color:#fff;width:100%;float:left}
	.tab4 {margin-right:0px}
	.contact-img1 {display:none}
	.contact-img2 {margin-bottom:5px;display:block;width:100%;text-align:center}
}
@media screen and (max-width: 610px) {
	.socialMediaHolder {clear:both;position:relative;background-color:#4b1e02;width:100%;height:40px;text-align:center}
	.socialBtn {float:none;display:inline-block}
	.beam,.beamEnd {position:relative;float:right;width:calc(50% - 6px)}
	#scrollRight {display:block}
}*/