/* ==========================================================================
   Author's custom styles
   ========================================================================== */


/* General */

body {
    background-color: #dadada;
    font-family: "Gotham SSm A", "Gotham SSm B";
    font-style: normal;
    font-weight: 400;
}

a {
    color: #000;
}

a:hover {
    color: #b9c033;
    text-decoration: underline;
}

a.darken {
    display: block;
    background: black;
    padding: 0;
    margin: 0;
}

a.darken img {
    display: block;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    width: 100%;
    height: auto;
    -webkit-backface-visibility: hidden;
}

a.darken:hover img {
    opacity: 0.7;
}

h1,
h2,
h3 {
    text-transform: uppercase;
}

h2 {
    font-size: 22px;
}

h3 {
    font-size: 14px;
    line-height: 1.2;
}

td,
th {
    padding: 5px 0;
}

.btn {
    font-weight: 300;
    border-radius: 0;
}

.btn-primary,
.btn-primary:active {
    background-color: #000;
    background-image: none;
    border-color: transparent;
    text-transform: uppercase;
    border: none;
    -webkit-transition: all 0.25s linear;
    -moz-transition: all 0.25s linear;
    -ms-transition: all 0.25s linear;
    -o-transition: all 0.25s linear;
    transition: all 0.25s linear;
}

.btn-primary:hover {
    background-color: #b9c033;
    border: none;
    color: #000;
}

.centered {
    text-align: center;
}

.hr-divider {
    border-top: 1px solid #000;
}

.byline {
    text-align: center;
    margin: 0 auto;
    padding-bottom: 40px;
}

.datatable {
    width: 80%;
    background-color: #fff;
    margin: 30px 0 0;
}

.datatable h4 {
    font-size: 14px
}

.datatable tr {
    border-top: 1px solid #ebebeb;
}

.datatable td {
    vertical-align: top;
    border-right: 1px solid #ebebeb;
    padding-left: 10px;
    padding-bottom: 10px;
}

.datatable h5 {
    font-weight: 300;
}

img.alignright {
    float: right;
    margin: 0 0 20px 20px;
}


/* Visual Composer Fixes */

.wpb_content_element {
    margin-bottom: 0;
}

.vc-img-responsive img {
    width: 100%;
}


/* Visual Composer Hack - VC adds in minus margins on their rows that doens't play nice with Bootstrap. Single Bricks page "wobbles". */

body.single-bricks .vc_row.wpb_row.vc_row-fluid {
    margin-left: 0;
    margin-right: 0;
}

.single-projects .vc_row,
.single-projects .vc_row .row,
.single-ideas .vc_row,
.single-ideas .vc_row .row {
    margin-left: 0;
    margin-right: 0;
}


/* Navigation */


/* WP-Admin bar fix */

body.logged-in .navbar .navbar-brand {
    top: 55px;
}

body.logged-in #search {
    margin-top: 16px;
}


/* End Wp-Admin stuff*/

#navbar {
    background-color: #fff;
    font-weight: 300;
}

.navbar-inverse {
    background-color: #dadada;
    background-image: none;
    border-color: transparent;
}

.navbar .navbar-collapse {
    text-transform: uppercase;
}

.navbar-inverse .navbar-nav>li>a {
    color: #fff;
}

.navbar-inverse .navbar-nav>li>a:hover {
    text-decoration: underline;
}

.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-nav>li>a {
    text-shadow: none;
}

.navbar-inverse .navbar-nav.nav-lower>li>a {
    color: #000;
    font-weight: 500;
}

.navbar-inverse .navbar-nav.nav-lower>li.active>a {
    color: #fff;
}

.nav-upper {
    background-color: #000;
}

.nav-upper li:first-child a {
    font-weight: 700;
    color: #7bc;
}

.nav-upper li:first-child a {
    border-color: #fff;
}

.navbar-brand {
    position: absolute;
    width: 321px;
    height: 74px;
    background-image: url(../kcmb/img/kcmb-logo.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    left: 50%;
    top: 70px;
}

.navbar>.container .navbar-brand,
.navbar>.container-fluid .navbar-brand {
    margin-left: -160.5px;
}

.navbar-header {
    background-color: #000;
}

.navbar-header a {
    color: #fff;
}

.navbar-toggle {
    float: left;
    margin-left: 15px;
    position: fixed;
    z-index: 9999;
    border: 0;
}

.navbar-toggle,
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
    background-color: #000;
}

nav.smaller .navbar-toggle,
nav.smaller.navbar-inverse .navbar-toggle:hover,
nav.smaller.navbar-inverse .navbar-toggle:focus {
    background-color: rgba(0, 0, 0, 0.8);
}

.dropdown a {
    float: left;
    text-transform: none;
}

.dropdown a.dropdown-toggle {
    padding-left: 0;
    margin-left: -7px;
}

.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus {
    background-color: #fff;
    color: #262626;
}

.dropdown-menu>li>a:hover {
    background-color: transparent;
    text-decoration: underline;
}

.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus {
    background-color: #000;
}

.navbar-inverse .navbar-nav.nav-lower>li.open>a,
.navbar-inverse .navbar-nav.nav-lower>li.open>a:hover,
.navbar-inverse .navbar-nav.nav-lower>li.open>a:focus {
    color: #fff;
}

.chevron {
    position: relative;
    text-align: center;
    padding: 0 4px;
    margin-bottom: 6px;
    height: 1px;
    width: 10px;
}

.chevron:before {
    content: '';
    position: absolute;
    top: 7.5px;
    left: 0;
    height: 2px;
    width: 50%;
    background: #000;
    -webkit-transform: skew(0deg, 45deg);
    -moz-transform: skew(0deg, 45deg);
    -ms-transform: skew(0deg, 45deg);
    -o-transform: skew(0deg, 45deg);
    transform: skew(0deg, 45deg);
}

.chevron:after {
    content: '';
    position: absolute;
    top: 7.5px;
    right: 0;
    height: 2px;
    width: 50%;
    background: #000;
    -webkit-transform: skew(0deg, -45deg);
    -moz-transform: skew(0deg, -45deg);
    -ms-transform: skew(0deg, -45deg);
    -o-transform: skew(0deg, -45deg);
    transform: skew(0deg, -45deg);
}

li.open .chevron:before,
li.open .chevron:after {
    background: #fff;
}


/* http://bootsnipp.com/snippets/featured/full-screen-search */

#search {
    position: fixed;
    width: 100%;
    top: 50px;
    background-color: rgba(255, 255, 255, 1);
    opacity: 0;
    height: 0;
    z-index: -9999;
}

#search.open {
    -webkit-transform: translate(0px, 0px) scale(1, 1);
    -moz-transform: translate(0px, 0px) scale(1, 1);
    -o-transform: translate(0px, 0px) scale(1, 1);
    -ms-transform: translate(0px, 0px) scale(1, 1);
    transform: translate(0px, 0px) scale(1, 1);
    opacity: 1;
    z-index: 9999;
    height: 100%;
}

#search form {
    position: relative;
    height: 100%;
    margin-top: 65px;
}

#search input[type="search"] {
    position: absolute;
    top: 25%;
    width: 100%;
    color: rgb(0, 0, 0);
    background: rgba(255, 255, 255, 0.1);
    font-size: 60px;
    font-weight: 300;
    text-align: center;
    border: 0px;
    margin: 0px auto;
    margin-top: -51px;
    padding-left: 30px;
    padding-right: 30px;
    outline: none;
}

#search .btn {
    position: absolute;
    top: 25%;
    left: 50%;
    margin-top: 61px;
    margin-left: -45px;
    text-decoration: underline;
}

#search .close {
    position: fixed;
    top: 15px;
    right: 0;
    color: #fff;
    background-color: #000;
    border-color: #333;
    opacity: 1;
    padding: 10px 17px;
    font-size: 27px;
}


/* Hero Section */

.jumbotron {
    height: 400px;
    background-size: cover;
    margin-bottom: 0;
    background-position: right center;
}

.jumbotron img {
    width: 100%;
}

.jumbotron p {
    margin-bottom: 0;
}

.container .jumbotron {
    border-radius: 0;
}

.container .jumbotron:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
    /* Adjusts for spacing */
}

.hero-text {
    display: inline-block;
    vertical-align: middle;
    background-color: #fff;
    padding: 20px 60px;
    position: relative;
    text-align: center;
}

.hero-text h1 {
    font-size: 30px;
    margin-top: 10px;
}

.hero-text p {
    font-size: 18px;
    text-decoration: underline;
    margin: 0;
    font-weight: 300;
}

.hero-text .btn {
    text-decoration: underline;
    position: absolute;
    width: 50%;
    margin-left: -25%;
}


/* Main Content */

#content {
    background-color: #EAEAEA;
}

#content ul {
    overflow: hidden;
}

main h2 {
    text-decoration: underline;
    text-align: center;
    margin: 0;
    padding: 30px 0;
    font-weight: 400;
}

main h3 {
    margin: 0;
}

article img {
    width: 100%;
}

article h3 {
    margin: 0;
}

article p {
    font-weight: 300;
    color: #5f5f5f;
}

.img-container {
    background-color: #fff;
    overflow: hidden;
    position: relative;
}

.img-container img {
    width: 100%;
}

.map-container {
    height: 320px;
    background-color: #fff;
    overflow: hidden;
}

.map-container iframe {
    height: 100%;
    width: 101%;
}

#home-new article,
#latest-posts article,
.feature-row {
    background-color: #fff;
    height: 100%;
}

.feature-row {
    overflow: hidden;
}

.feature-row.textarea {
    padding: 20px;
}

.feature-row ul {
    list-style: none;
}

.brickdatatable {
    width: 90%;
    border: 0px;
}

.brickdatatable td {
    padding: 5px;
    align-content: flex-start;
    border-bottom: 1px #999999 solid;
}

.brickdatatable td h4,
h5,
h5 strong {
    font-size: 14px;
    font-weight: 400;
}

#home-article,
.post-article {
    margin-bottom: 30px;
}

#home-new article. #latest-posts article {
    height: 100%;
}

.post-article .img-container {
    height: 300px;
}

.post-article .img-container a {
    height: 100%;
}

#home-new article .img-container img,
#latest-posts article .img-container img {
    height: 100%;
    object-position: 50% 50%;
    object-fit: cover;
}

#home-new article h3,
#latest-posts article h3 {
    padding: 20px;
}

#home-new article p,
#latest-posts article p {
    padding: 0 20px 40px;
}

#home-inspiration,
.inspiration ul,
#home-inspiration ul,
#home-about ul {
    overflow: hidden;
}

#home-inspiration ul,
.inspiration ul,
#home-about ul {
    padding: 20px;
}

#home-inspiration ul li,
.inspiration ul li {
    list-style-type: none;
}

#home-inspiration article h3,
.inspiration article h3 {
    padding: 20px 0;
    min-height: 75px;
}

#home-about .feature-row {
    padding: 20px;
}

.about-text {
    text-align: justify;
}

.about-text p:last-child {
    margin-bottom: 0;
}

.about-img img {
    float: right;
    width: 100%;
}

#home-showroom .img-container {
    margin-bottom: 30px;
    max-width: 570px;
}

#home-showroom h3 {
    margin-bottom: 10px;
}

#home-showroom td {
    padding: 0;
}

.store-hours {
    float: right;
    font-weight: 700;
}

@media (min-width: 992px) {
    #home-new article .img-container img,
    #latest-posts article .img-container img {
        height: 100%;
        position: absolute;
        width: 100%;
    }
}


/* Ideas and Products Pages */

#featured-post {
    margin-bottom: 30px;
}

#featured-post ul,
.featured-product ul {
    overflow: hidden;
    margin-bottom: 0;
    list-style-type: none;
    padding-left: 0;
}

#featured-post ul .feat-text,
.featured-product ul .feat-text {
    max-width: 95%;
}

#featured-post ul .feat-text {
    padding: 0 30px 30px;
}

.featured-product ul .feat-text {
    padding: 0px 30px 20px;
}

#featured-post ul li .img-container,
.featured-product ul li .img-container {
    height: 100%;
}

#featured-post ul li .img-container img,
.featured-product ul li .img-container img {
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
}

#featured-post ul li h3 {
    margin: 60px 0 30px;
}

a#filter {
    margin-top: 0;
}

.featured-product ul li h3 {
    margin: 40px 0 30px;
}


/* Products Page */

.page-content {
    padding: 30px 15px 90px;
}

#cladding-options ul {
    padding: 20px;
}

#cladding-options ul li,
#brick-options ul li {
    float: left;
}

#cladding-options ul li h3 {
    margin: 15px 0;
}

#cladding-options ul li p:last-child {
    margin-bottom: 0;
}

#cladding-options ul li:last-child {
    margin-right: 0;
}

#cladding-options ul li p {
    margin: 10px 10px 0 0;
}

#brick-options ul {
    padding: 20px;
}

#brick-options ul li {
    width: 49%;
}

#brick-options ul li:first-child {
    margin-right: 2%;
}

#brick-options h3 {
    margin: 30px 0 15px;
}

.brick-columns ul {
    list-style: none;
    padding-left: 0;
}

.brick-columns article {
    background-color: #fff;
}

.brick-columns article h3,
.brick-columns article h4,
.brick-columns article p {
    padding: 15px;
}

.brick-columns article p {
    margin-bottom: 0;
}

.brick-columns .img-container {
    height: 200px;
}


/* Single Brick Page */

#content.single-brick {
    padding: 0 70px 90px;
}

#contact-brick.single-brick {
    background-color: #fff;
    overflow: hidden;
}

#brick-hero h1 {
    text-align: center;
    font-size: 22px;
    text-decoration: underline;
    padding: 30px 0;
    margin: 0;
    background-color: #EAEAEA;
}

.post-content {
    padding: 30px 15px 90px;
}

.news-content img {
    margin: 20px 0;
    max-width: 100%;
    height: auto;
}

.brick-wrap {
    position: relative;
}

#brick-hero .brick-wrap {
    background-color: #4B5054;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 300;
}

.brick-wrap h3 {
    margin-top: 20px;
}

.brick-wrap-l p {}

.brick-wrap a {
    color: #fff;
}

.brick-wrap ul {
    padding-left: 20px;
    overflow: hidden;
    list-style: none;
}

.brick-wrap ul li {
    line-height: 25px;
}

.brick-wrap ul li a {
    display: block;
    text-transform: uppercase;
    color: #BDBDBD;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    -ms-transition: height 0.3s;
    -o-transition: height 0.3s;
    transition: height 0.3s;
}

.brick-wrap ul li:before {
    /*Using a Bootstrap glyphicon as the bullet point*/
    content: "\e202";
    font-family: 'Glyphicons Halflings';
    font-size: 14px;
    float: left;
    margin-left: -17px;
    color: #CCCCCC;
}

i.fa.fa-share-alt {
    font-size: 26px;
    border: 1px solid #fff;
    width: 40px;
    height: 40px;
    padding: 5px 0;
    text-align: center;
    margin-top: 5px;
}

.divTable {
    display: table;
    width: 100%;
}

.divTableRow {
    display: table-row;
}

#brick-hero .divTableRow .divTableCell:nth-child(1) {
    color: #BDBDBD;
    text-transform: uppercase;
}

#brick-hero .divTableRow .divTableCell:nth-child(2) {
    color: #fff;
    padding-left: 10px;
}

.divTableHeading {
    background-color: #EEE;
    display: table-header-group;
}

.divTableCell,
.divTableHead {
    display: table-cell;
    padding: 4px 0;
}

.divTableCell a {
    color: #000;
}

.divTableHeading {
    background-color: #EEE;
    display: table-header-group;
    font-weight: bold;
}

.divTableFoot {
    background-color: #EEE;
    display: table-footer-group;
    font-weight: bold;
}

.divTableBody {
    display: table-row-group;
}

#mortar-tool {
    color: #5F5F5F;
    background-color: #fff;
}

#mortar-selector:after,
.mortar-wrap:after,
#brick-dropdown {
    content: "";
    display: table;
}

#mortar-tool {
    padding: 30px 0 30px 90px;
    overflow: hidden;
}

.mortar-wrap {
    padding: 0 52.5px 30px;
    color: #5F5F5F;
    background-color: #fff;
    overflow: hidden;
}

.mortar-wrap .col-md-7 {
    padding-left: 10px;
}

.mortar-wrap .brick-wrap-l .tab-content {
    max-width: 570px;
}

.mortar-wrap hr {
    margin-right: 30px;
}

#selectcolor,
.mortar-wrap p,
#brick-dropdown {
    padding-left: 15px;
}

#mortar-tool hr,
#contact-brick hr,
#mortar-selector hr {
    margin-top: 5px;
    border-top: 1px solid #979797;
}

#mortar-tool h3,
#contact-brick h3 {
    color: #525252;
}

#mortar-tool h3,
#contact-brick h3,
#mortar-selector h3 {
    font-weight: 300;
}

#mortar-tool .brick-wrap-r p {
    font-weight: 300;
}


/* https://codepen.io/cssjockey/pen/jGzuK */

ul.tabs {
    padding: 0px;
    list-style: none;
    margin-bottom: 30px;
}

ul.tabs li {
    color: #222;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
}

ul.tabs li.current {
    border: 1px solid transparent;
    box-shadow: inset 0 0 0 2px rgba(148, 153, 158, .75);
}

.tab-content {
    display: none;
}

.tab-content.current {
    display: inherit;
}

.mortar-selection li {
    float: left;
    margin-right: 9.75px;
}

.mortar-selection li:last-child {
    margin-right: 0;
}

.mortar-square {
    width: 30px;
    height: 30px;
    border: 1px solid #979797;
}

.ms-dark_grey {
    background: #454749;
}

.ms-mid_grey {
    background: #D8D8D8;
}

.ms-natural {
    background: #94999e;
}

.ms-buff {
    background: #c4ae79;
}

.ms-ivory {
    background: #d3c5b5;
}

.ms-white {
    background: #fff;
}

.ms-brown_red {
    background: #613333;
}

#brick img {
    width: 100%;
}

#selectcolor ul {
    list-style: none;
    padding-left: 0;
    width: 100%;
    overflow: hidden;
}

#selectcolor ul li {
    width: 30px;
    height: 30px;
    border: 1px solid #eee;
    margin-right: 10px;
    float: left;
    cursor: pointer;
}

#selectcolor ul li.col1 {
    background: #454749;
}

#selectcolor ul li.col2 {
    background: #D8D8D8;
}

#selectcolor ul li.col3 {
    background: #94999e;
}

#selectcolor ul li.col4 {
    background: #c4ae79;
}

#selectcolor ul li.col5 {
    background: #d3c5b5;
}

#selectcolor ul li.col6 {
    background: #fff;
}

#selectcolor ul li.col7 {
    background: #613333;
}

#selectcolor ul li a {
    width: 30px;
    height: 30px;
    display: block;
}

.mortar-square a {
    height: 100%;
    display: block;
}

#brick-dropdown {
    margin-top: 20px;
}

#brick-dropdown .btn {
    background-color: #000;
    color: #fff;
    text-transform: uppercase;
}

#brick-dropdown.open>.dropdown-toggle.btn-primary {
    background-color: #000;
    border-color: #000;
}

.tabs.dropdown-menu {
    margin-top: 0;
    border-radius: 0;
    position: static;
}

ul.tabs.dropdown-menu li {
    width: 100%;
}

ul.tabs.dropdown-menu li:hover {
    text-decoration: underline;
}

#contact-brick .feature-row {
    padding-top: 30px;
}

#contact-brick .form-inline .form-group {
    margin-bottom: 30px;
}

#contact-brick .form-inline .form-group.response {
    width: 100%;
    text-align: center;
    font-size: 18px;
}

#contact-brick .form-inline .control-label {
    font-weight: 300;
    text-transform: uppercase;
    font-size: 12px;
}

#contact-brick .form-group .form-control {
    border-radius: 0;
    height: 45px;
    border-color: #979797;
}

#contact-brick .form-inline .btn {
    background-color: #000;
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    height: 45px;
    padding: 0 40px;
    text-transform: uppercase;
}


/* Carousel */

.carousel-control {
    opacity: 1;
}

.carousel-control.left,
.carousel-control.right {
    background-image: none;
}

.carousel-control .icon-previous,
.carousel-control .glyphicon-chevron-left {
    margin-left: -35px;
}

.carousel-control .icon-previous:before,
.carousel-control .glyphicon-chevron-left:before {
    content: "\e257";
}

.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-right {
    margin-right: -35px;
}

.carousel-control .icon-next:before,
.carousel-control .glyphicon-chevron-right:before {
    content: "\e258";
}

#brick-Carousel {
    height: 400px;
    overflow: hidden;
}

#brick-Carousel img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: 50% 0;
}

#brick-checkbox {
    background-color: #000;
    padding: 25px 0;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
}

#brick-checkbox ul {
    list-style-type: none;
    padding: 0;
    overflow: hidden;
}

#brick-checkbox h4 {
    position: relative;
    text-transform: uppercase;
}

#brick-checkbox h4.brick-checkbox-title {
    margin: auto;
    position: absolute;
    width: 100%;
    height: 20px;
}

h4.brick-checkbox-mobile a {
    color: #fff;
}

ul.brick-checkbox-desktop {
    margin: auto;
    width: 690px;
}

ul.brick-checkbox-desktop li {
    color: #fff;
    float: left;
    width: 19%;
    margin-right: 8%;
    position: relative;
    text-transform: uppercase;
    font-weight: 500;
}

ul.brick-checkbox-desktop li:after {
    content: "\e252";
    font-family: 'Glyphicons Halflings';
    position: absolute;
    right: 0;
    font-size: 14px;
}

ul.brick-checkbox-desktop li:hover {
    text-decoration: underline;
}

ul.brick-checkbox-desktop li:last-child {
    margin-right: 0;
}

h4.brick-checkbox-mobile {
    text-align: center;
    width: 160px;
    margin: auto;
}

#brick-checkbox h4 a {
    color: #fff;
}

#brick-checkbox h4:after {
    content: "\e252";
    font-family: 'Glyphicons Halflings';
    position: absolute;
    right: 0;
    top: 2px;
    font-size: 14px;
}

.checklist ul li {
    overflow: hidden;
    padding-bottom: 10px;
}

.checklist h4 {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: initial;
}

.checklist h5 {
    float: left;
    font-weight: 400;
    line-height: 1.42857142857143;
    margin: 0;
}

.checklist .radio input[type=radio] {
    right: 2px;
}

.checklist label.radio {
    font-weight: 400;
}

#brick-list {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: #EAEAEA;
}

#brick-list p {
    text-align: center;
    font-size: 22px;
    text-decoration: underline;
    padding: 30px 0;
    margin: 0;
}

.brick-columns ul {
    list-style: none;
    padding-left: 0;
    overflow: hidden;
    margin: 0 auto;
    max-width: 900px;
}

.brick-columns article {
    background-color: #fff;
    min-height: 225px;
}

.brick-columns article h3,
.brick-columns article h4,
.brick-columns article p {
    padding: 15px;
}

.brick-columns article h4 {
    font-size: 12px;
    line-height: 1.416666667;
    margin: 0;
}

.brick-columns article p {
    margin-bottom: 0;
}

.brick-columns .img-container {
    height: 200px;
}

#brick-list li {
    width: calc(48% - 15px);
    float: left;
    margin-right: 15px;
    margin-bottom: 15px;
}


/* Code lifted from here: https://codepen.io/bbodine1/pen/novBm; */

.squaredOne {
    width: 15px;
    height: 15px;
    position: relative;
    border: 1px solid #fff;
    background: transparent;
    float: right;
}

.squaredOne label {
    width: 14px;
    height: 14px;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}

.squaredOne label:after {
    content: '';
    width: 14px;
    height: 14px;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    opacity: 0;
}

.squaredOne input[type=checkbox] {
    visibility: hidden;
}

.squaredOne input[type=checkbox]:checked + label:after {
    opacity: 1;
}

@media screen and (min-width: 992px) {

    ul.brick-checkbox-desktop {
        margin: auto;
        width: 900px;
    }

}

/* About Page */

.about-logos ul {
    list-style: none;
}

.about-logos li {
    float: left;
    width: 33.3333%;
    text-align: center;
}

.about-logos img {
    max-width: 100%;
}


/* Posts Page */

.main-post {
    margin-top: 0;
}

#post-hero .jumbotron {
    position: relative;
    padding: 0;
}

#post-hero .jumbotron .hero-text {
    position: absolute;
    left: 50%;
    margin-left: -25%;
    top: 50%;
    margin-top: -5%;
}

#post-intro {
    margin-bottom: 30px;
}

#post-intro h3 {
    margin: 30px 0;
    text-transform: none;
}

#post-intro .img-container {
    margin: 30px 0;
}

#post-intro .embed-responsive {
    margin-top: 30px;
}

#post-intro a {
	display: block;
	height: 100%;
}

#post-gallery ul {
    padding: 20px 20px 0;
    margin: 0;
    overflow: hidden;
    list-style-type: none;
}

#post-gallery ul li {
    float: left;
    width: 32%;
    margin-right: 2%;
    margin-bottom: 20px;
}

#post-gallery ul li .img-container {
    height: 200px;
    display: block;
}

#post-gallery ul li .img-container img {
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

#sub-gallery {
    margin: 30px -15px;
}

#sub-gallery .img-container {
    margin: 30px 0;
}


/* Archive Page */

.archive h2 {
    text-decoration: underline;
    margin: 0;
    padding: 30px 0;
    font-weight: 400;
}

article.type-post {
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    margin-bottom: 30px;
}

article.type-post .img-container {
    height: 250px;
    background-color: #000;
}

article.type-post .img-container img {
    object-fit: cover;
    height: 100%;
}

article.type-post .titlewrap {
    padding: 0 20px 10px;
    background-color: #fff;
}

article.type-post .titlewrap p {
    margin-top: 10px;
    font-size: 12px;
}

article.type-post .titlewrap h2 {
    font-size: 18px;
    line-height: 26px;
    min-height: 115px;
    margin-top: 0;
}

.article-list-wrap ul {
    list-style: none;
    padding: 20px;
}


/* Pagination */

.wp-pagenavi a,
.wp-pagenavi span {
    padding: 5px 7.5px;
    border: 0px;
    font-weight: 300;
    text-transform: uppercase;
}

.wp-pagenavi span.current {
    font-weight: 300;
}

.wp-pagenavi span,
.wp-pagenavi a {
    margin-left: 0;
    margin-right: 7.5px;
}

.wp-pagenavi span {
    background-color: #fff;
}

.wp-pagenavi a {
    background-color: #999;
    color: #fff;
}

span.pages {
    margin-left: 0;
    display: block;
    margin-bottom: 15px;
    text-indent: 10px;
}


/* Footer Section */

footer {
    font-weight: 300;
}

.footer-inner {
    background-color: #fff;
    padding: 10px 30px 60px;
}

.footer-inner img {
    padding: 15px 10px;
}

@media (max-width: 767px) {
    html,
    body {
        height: 100%;
    }
    body {
        line-height: 22px;
        background-color: #fff;
    }
    body.logged-in .navbar .navbar-brand {
        top: 120px;
    }
    body.logged-in #navbar {
        top: 96px;
    }
    /* VC Mobile Fix - margin override of VC row class requires no padding on mobile */
    .vc_column_container>.vc_column-inner {
        padding-left: 0;
        padding-right: 0;
    }
    .page-content .vc_row .row {
        margin-left: 0;
        margin-right: 0;
    }
    .navbar {
        height: 150px;
        margin-bottom: 0;
    }
    .navbar-nav {
        margin: 0 -15px;
    }
    .nav-upper {
        background-color: transparent;
    }
    .nav-lower {
        border-bottom: 1px solid #000;
    }
    .navbar-inverse .navbar-nav>li>a {
        color: inherit;
        font-weight: 500;
    }
    .nav>li.dropdown.open {
        background-color: #000;
    }
    .navbar-nav .open .dropdown-menu {
        background-color: #fff;
        width: 100%;
        overflow: hidden;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom: 1px solid #9d9d9d;
    }
    .navbar-nav .open .dropdown-menu li {
        width: 100%;
        overflow: hidden;
        padding: 5px 0;
    }
    .navbar-nav .open .dropdown-menu li a {
        line-height: 21px;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
        color: #555;
    }
    .navbar-fixed-top .navbar-collapse,
    .navbar-fixed-bottom .navbar-collapse {
        max-height: none;
    }
    .navbar-inverse {
        background-color: #fff;
        background-image: none;
        border-color: transparent;
        position: initial;
    }
    /*.navbar-inverse .navbar-nav.nav-lower>li>a:first-child {
        width: 90%;
        float: left;
    }
    .navbar-inverse .navbar-nav.nav-lower>li>a:last-child {
        width: 10%;
        float: left;
    } */
    .navbar-header {
        height: 50px;
    }
    #navbar {
        position: fixed;
        z-index: 9999;
        width: 100%;
    }
    #navbar {
        top: 50px;
    }
    nav.smaller .navbar-header {
        background-color: rgba(0, 0, 0, .8)
    }
    nav.smaller .navbar-header .navbar-brand {
        display: none;
    }
    .nav>li {
        overflow: hidden;
        font-size: initial;
        line-height: initial;
    }
    .nav>li a {
        padding: 15px;
    }
    .navbar-brand {
        width: 225px;
        height: 52px;
    }
    #navbar {
        position: fixed;
        overflow: auto;
        height: 100%;
    }
    .navbar>.container .navbar-brand,
    .navbar>.container-fluid .navbar-brand {
        margin-left: -112.5px;
    }
    .xs-search {
        float: right;
        margin-right: 15px;
        margin-top: 15px;
        font-size: 18px;
    }
    #search {
        left: 0;
    }
    #search .close {
        top: -50px;
    }
    #search input[type="search"] {
        top: 0;
        margin-top: 0;
        color: rgb(255, 255, 255);
        background: rgba(0, 0, 0, 1);
        font-size: 24px;
    }
    main h2 {
        max-width: 90%;
        margin: 0 auto;
    }
    #content {
        padding: 30px 0 30px;
    }
    .jumbotron {
        height: 175px;
        margin-top: 0;
        margin-bottom: 50px;
    }
    .container .jumbotron {
        margin-left: -15px;
        margin-right: -15px;
    }
    #search.open {
        background-color: #000;
    }
    #search .btn {
        background-color: #fff;
        color: #000;
    }
    .hero-text {
        padding: 10px 20px;
        width: 100%;
        box-shadow: 0 0 0 1px hsl(25, 0%, 95%), 0 0 0 1px hsl(0, 0%, 95%);
    }
    .hero-text h1 {
        font-size: 24px;
    }
    .hero-text .btn {
        width: 75%;
        margin-left: -37.5%;
        font-size: 12px;
    }
    .main-post {
        margin-top: 75px;
    }
    #content {
        background-color: transparent;
    }
    .byline {
        width: 90%;
    }
    .post-content {
        padding: 15px 0 45px;
    }
    #post-hero .jumbotron .hero-text {
        width: calc(100% - 30px);
        margin-left: calc(-50% + 15px);
        margin-top: 10%;
    }
    #post-hero .jumbotron img {
        position: absolute;
        top: 0;
    }
    .single-projects .main-post,
    .single-ideas .main-post {
        margin-top: 30px;
    }
    .single-projects .jumbotron,
    .single-ideas .jumbotron {
        height: 100%;
        margin: 0;
    }
    .single-projects .main-post,
    .single-ideas .main-post {
        margin-top: 0;
    }
    .single-projects #post-hero .col-md-12,
    .single-ideas #post-hero .col-md-12 {
        padding: 0;
    }
    .single-projects #post-hero .jumbotron,
    .single-ideas #post-hero .jumbotron {
        position: relative;
        padding: 0;
        display: inline-block;
        width: 100%;
    }
    .single-projects #post-hero .jumbotron img,
    .single-ideas #post-hero .jumbotron img {
        float: left;
        position: relative;
    }
    #content #post-intro .wpb_text_column:last-child img.alignright {
        margin-bottom: 20px;
    }
    #post-gallery ul li .img-container {
        height: 120px;
    }
    #cladding-options ul li {
        margin-bottom: 20px;
    }
    .footer-inner img {
        padding: 10px 0;
    }
    #post-gallery ul {
        padding-bottom: 20px;
    }
    #post-gallery ul li {
        width: 48%;
    }
    #post-gallery ul li:nth-child(odd) {
        margin-right: 2%;
    }
    #post-gallery ul li:nth-child(even) {
        margin-right: 0;
    }
    #contact-brick {
        padding: 15px 0;
    }
    #contact-brick .form-inline .form-group.text-right {
        width: 100%;
        text-align: left;
    }
    #contact-brick .form-inline .btn {
        width: 100%;
    }
    #brick-Carousel {
        font-size: 18px;
    }
    #brick-Carousel,
    #brick-Carousel img {
        height: auto;
    }
    .brick-columns .col-sm-6 {
        padding: 0;
    }
    .brick-wrap-r {
        padding: 30px 0;
    }
    .enquiry-wrap {
        padding: 0 15px;
    }
    #brick-list li:nth-child(odd) {
        margin-left: 15px;
    }
    #brick-list li:nth-child(even) {
        margin-right: 0;
    }
    #contact-brick h3 {
        margin-top: 0;
    }
    #contact-brick .brick-wrap-r {
        padding: 0 15px;
    }
    ul.checkbox-wrap {
        width: 90%;
        margin-left: 5%;
    }
    .single-brick .brick-wrap-l {
        padding: 15px;
    }
    .checklist {
        padding: 0 30px;
    }
    #mortar-tool {
        padding: 15px 0;
    }
    #mortar-tool ul.tabs {
        padding-left: 15px;
    }
    .mortar-wrap {
        padding: 0;
    }
    .mortar-wrap .brick-wrap-l {
        margin-top: 20px;
    }
    #brick-hero h1 {
        font-size: 18px;
    }
    .pcol1 {
        margin-bottom: 20px;
    }
    .feature-row {
        background-color: #EAEAEA;
    }
    .feat-img-left,
    .feat-img-right {
        margin-bottom: 20px;
        padding: 0;
    }
    #brick-dropdown.open .tabs.dropdown-menu {
        max-width: 95%;
        position: static;
        margin-left: 0;
    }
    span.pages {
        width: 100%;
    }
    .about-logos ul {
        margin-left: 0;
    }
    .about-logos ul li {
        width: 50%;
        margin-right: 0;
    }
    .about-logos li img {
        width: 100%;
    }
    footer {
        border-top: 1px solid #dadada;
    }
    footer .container {
        padding: 0;
    }
    .footer-inner {
        padding: 10px 15px 30px;
    }
}


/* Smartphones (landscape) ----------- */

@media only screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
    #post-intro img.alignright {
        float: none;
        margin: 0;
        width: 100%;
        height: 100%;
    }
}


/* Smartphones (landscape) ----------- */

@media only screen and (min-width: 321px) and (max-width: 767px) and (orientation: landscape) {
    body.logged-in .navbar .navbar-brand {
        top: 110px;
    }
    .navbar {
        height: 125px;
    }
    .navbar-brand {
        top: 60px;
    }
    #post-hero .jumbotron .hero-text {
        left: 50%;
        margin-left: -25%;
        width: 50%;
        padding: 20px;
    }
    #post-gallery ul li .img-container {
        height: 200px;
    }
}

@media (min-width: 768px) {
    body {
        padding-top: 205px;
        line-height: 25px;
    }
    body.logged-in .navbar {
        margin-top: 32px;
    }
    body.single-post,
    body.single-projects,
    body.single-ideas {
        padding-top: 178px;
    }
    .navbar .navbar-nav {
        vertical-align: top;
        width: 100%;
        text-align: center;
    }
    .navbar-fixed-top.smaller .navbar-header {
        position: relative;
    }
    .nav>li {
        display: inline-block;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>.dropdown-menu {
        border-top: 0;
    }
    .navbar-nav>li>a {
        margin-left: 15px;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
        margin-left: 0;
        line-height: initial;
    }
    .nav-upper {
        -webkit-font-smoothing: antialiased;
        -moz-font-smoothing: antialiased;
        -o-font-smoothing: antialiased;
        font-size: 11.2px;
    }
    .nav-upper li {
        padding-top: 10px;
        padding-bottom: 10px;
        float: none;
    }
    .nav-upper li a {
        border-right: 1px solid;
        padding-top: 0;
        padding-bottom: 0;
    }
    .nav-lower {
        height: 171px;
        -webkit-transition: height 0.1s;
        -moz-transition: height 0.1s;
        -ms-transition: height 0.1s;
        -o-transition: height 0.1s;
        transition: height 0.1s;
        padding-top: 135px;
    }
    .navbar-fixed-top.smaller .navbar-brand {
        background-image: none;
        margin-left: 0;
        top: 35px;
        height: 70px;
    }
    .navbar-fixed-top.smaller .nav-lower {
        background-image: url(../kcmb/img/footer-logo.png);
        background-repeat: no-repeat;
        background-position: 40px;
        height: 70px;
        padding-top: 17px;
    }
    .navbar-inverse .navbar-nav.nav-lower>li>a {
        font-size: 14.4px;
        padding-top: 10px;
        padding-bottom: 10px;
        float: left;
    }
    .navbar-fixed-top.smaller .nav-lower>li>a {
        padding-top: 10px;
    }
    .nav-upper li:nth-child(3) a {
        border: none;
    }
    .nav-upper li.nav-search {
        position: relative;
    }
    .nav-upper li.nav-search:after {
        position: absolute;
        font-family: 'Glyphicons Halflings';
        content: "\e003";
        display: block;
        color: #7bc;
        z-index: 1;
        left: 40px;
        top: 2.5px;
    }
    .nav-upper li.nav-search a {
        border-right: 0;
        margin-left: 30px;
        color: #7bc;
        text-indent: -9999px;
        position: absolute;
        z-index: 2;
        display: block;
    }
    #search {
        width: 720px;
    }
    .hero-text {
        width: 65%;
    }
    #post-hero .jumbotron .hero-text {
        margin-left: -32.25%;
    }
    .row-eq-height {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
    #home-inspiration,
    #home-about,
    #home-showroom {
        margin-top: 60px;
        margin-bottom: 60px;
    }
    #cladding-options,
    #brick-options {
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .byline {
        width: 70%;
    }
    #brick-specials,
    #services,
    #showroom {
        margin-top: 30px;
    }
    ul.checkbox-wrap {
        width: 690px;
    }
    .inspiration {
        margin-bottom: 30px;
    }
    .featured-product {
        margin-bottom: 30px;
    }
    .featured-product ul .feat-text {
        padding: 40px 30px 30px;
    }
    .featured-product ul li h3 {
        margin: 40px 0 30px;
    }
    #home-inspiration ul li,
    .inspiration ul li {
        float: left;
        width: 31.66667%;
        margin-right: 2.5%;
    }
    #home-inspiration ul li:last-child,
    .inspiration ul li:last-child {
        margin-right: 0;
    }
    .about-text p {
        max-width: 90%;
    }
    #featured-post ul li {
        width: 50%;
        float: left;
    }
    #featured-post ul li h3 {
        margin-top: 30px;
    }
    #post-hero .jumbotron {
        height: auto;
    }
    #post-gallery ul li:nth-child(3n+3) {
        margin-right: 0;
    }
    #cladding-options ul li {
        width: 24%;
        margin-right: 1.33334%;
    }
    #brick-hero .divTable {
        padding-top: 30px;
    }
    #featured-post {
        margin-bottom: 60px;
    }
    .feat-img-left {
        padding-right: 0;
    }
    .feat-img-right {
        padding-left: 0;
    }
    .mortar-selection {
        overflow: hidden;
        padding-left: 0;
        list-style-type: none;
    }
    #mortar-tool hr {
        margin-right: 70px;
    }
    #contact-brick {
        padding: 40px 0 40px 35px;
    }
    #contact-brick h3 {
        margin-top: 0;
    }
    #contact-brick.single-brick {
        padding: 40px 20px 40px 70px;
    }
    #contact-brick .form-group:nth-child(even) .control-label,
    #contact-brick .form-group:nth-child(even) .form-control {
        margin-left: 5%;
    }
    #contact-brick .form-inline .form-group {
        width: 50%;
        float: left;
    }
    #contact-brick .form-group .form-control {
        width: 95%;
    }
    .tablelist {
        display: table;
        margin: 0 auto;
    }
    .checklist {
        float: left;
        display: inline;
        width: 19%;
        margin-right: 8%;
    }
    .checklist.last {
        margin-right: 0;
    }
    ul.checkbox-wrap .collapse.in ul {
        margin-top: 20px;
    }
    .article-list-wrap li {
        float: left;
        width: 48.75%;
    }
    .article-list-wrap li:nth-child(odd) {
        margin-right: 2.5%;
    }
    .article-list-wrap li:nth-child(even) {
        margin-right: 0;
    }
    /* About Page */
    .pcol1 {
        float: left;
        width: 45%;
        text-align: justify;
        margin-right: 10%;
    }
    .pcol2 {
        float: left;
        width: 45%;
        text-align: justify;
    }
    .navbar-inverse .navbar-nav>.active>a {
        background: transparent;
        color: #000;
    }
    .navbar-inverse .navbar-nav.nav-lower>li.active>a {
        background: transparent;
        color: #000;
    }
    .navbar-inverse .navbar-nav.nav-lower>li.open>a,
    .navbar-inverse .navbar-nav.nav-lower>li.open>a:hover,
    .navbar-inverse .navbar-nav.nav-lower>li.open>a:focus {
        background: transparent;
        color: #000;
    }
    span.pages {
        max-width: 330px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #brick-list li {
        width: calc(32.6333% - 15px);
    }
    /* Select Every Fourth, Starting At The First */
    #brick-list li:nth-child(3n-8) {
        margin-left: 15px;
    }
    .brick-columns article h4 {
        min-height: 64px;
    }
    .single-brick .brick-wrap-l {
        padding: 30px;
    }
    .footer-inner img {
        padding-left: 0;
        margin-left: -15px;
    }
}

@media (max-width: 992px) {
    body.logged-in #post-hero .jumbotron {
        height: calc(100vh - 191px);
    }
    .container .jumbotron,
    .container-fluid .jumbotron {
        padding-left: 15px;
    }
}

@media (min-width: 992px) {
    body {
        line-height: 27px;
    }
    /* WP-Admin bar fix */
    body.logged-in .navbar .navbar-brand {
        top: 55px;
    }
    body.logged-in #search {
        margin-top: 16px;
    }
    #search {
        width: 940px;
    }
    .hero-text {
        width: 45%;
        margin-left: 35px;
    }
    #post-hero .jumbotron .hero-text {
        margin-left: -25%;
    }
    #post-hero .jumbotron .hero-text {
        width: 50%;
    }
    #featured-post ul li h3 {
        margin-top: 60px;
    }
    .brick-wrap {
        padding: 0 0 0 90px;
    }
    .brick-wrap-l {
        padding-right: 0;
        padding-left: 0;
        margin-left: -1.8%;
    }
    #brick-hero .divTable {
        padding-top: 60px;
    }
    #contact-brick {
        padding: 40px 15px;
    }
    #contact-brick.single-brick {
        padding: 0;
    }
    ul.checkbox-wrap {
        width: 900px;
    }
    #brick-list li {
        width: calc(20.335% - 15px);
    }
    #brick-list li:nth-child(5n+0) {
        margin-right: 0;
    }
    .page-template-page-mortar-tool #page-hero .hero-text {
        margin-left: 0;
    }
    .page-template-page-mortar-tool #page-hero .jumbotron {
        padding-right: 50px;
        padding-left: 50px;
    }
    #mortar-tool hr {
        margin-right: 70px;
        margin-left: -17.5px;
    }
    #mortar-tool h3 {
        margin-left: -17.5px;
    }
    .wp-pagenavi {
        margin-left: 77.5px;
    }
    span.pages {
        max-width: 361.66px;
    }
    footer address {
        padding-right: 15px;
    }
    footer .address-fix {
        padding-left: 0;
    }
    footer .address-fix2 {
        padding-left: 30px;
    }
}

@media (min-width: 1200px) {
    body {
        line-height: 28px;
    }
    .container {
        width: 1130px;
    }
    #search {
        width: 1100px;
    }
    .hero-text {
        margin-left: 45px;
    }
    .wp-pagenavi {
        margin-left: 90px;
    }
    #brick-Carousel {
        width: 640px;
        padding-left: 0;
        margin-left: -5%;
    }
    #mortar-tool .tab-content.current {
        margin-left: -30px;
    }
    #mortar-tool .brick-wrap-l img {
        height: 100%;
    }
    #contact-brick .form-inline .control-label {
        font-size: inherit;
    }
    .single-brick .enquiry-wrap {
        margin-left: -50px;
        max-width: 570px;
    }
    #contact-brick .brick-wrap-l,
    #contact-brick .brick-wrap-r {
        padding-left: 0;
    }
    .rc-anchor-normal {
        width: 88%;
    }
    span.pages {
        max-width: 420px;
    }
}

.nameinput {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: 16px 18px;
    background-position: 98% 50%;
}