/*
Theme Name: pi_bones
Theme URI: http://thestudio-patrick.com/
Author: E.M. Webber
Author URI: http://thestudio-patrick.com
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: pi_bones
Tags:
*/

/*
font-family: eurostile, sans-serif; font-weight: 400; font-style: normal;
font-family: eurostile, sans-serif; font-weight: 700; font-style: normal;
font-family: eurostile-extended, sans-serif; font-weight: 400; font-style: normal;
font-family: eurostile-extended, sans-serif; font-weight: 900; font-style: normal;

font-family: 'Cuprum', sans-serif; font-weight: 400, 700; font-style: normal;

font-family: brandon-grotesque, sans-serif; font-weight: 300; font-style: normal;
font-family: brandon-grotesque, sans-serif; font-weight: 400; font-style: normal;
font-family: brandon-grotesque, sans-serif; font-weight: 500; font-style: normal;
font-family: brandon-grotesque, sans-serif; font-weight: 700; font-style: normal;
font-family: brandon-grotesque, sans-serif; font-weight: 900; font-style: normal;
*/



/* ----------------------------------------------------------------------------
	html elements
---------------------------------------------------------------------------- */
body {font-family: "brandon-grotesque",sans-serif; font-style: normal; font-weight: 400; padding-top: 0px; background: #ffffff; letter-spacing: 0.5px; color: #191919; font-size: 18px; line-height: 2em; overflow-y: scroll; overflow-x: hidden;}
hr { border-color: #ccc; }
a { color: #00666f; text-dcoration: none; }
a:hover, a:focus { color: #00444e; text-decoration: none; }
label { font-family: "brandon-grotesque",sans-serif; font-weight: 400; color: #333; }
h1, h2, h3, h4, h5 { font-family: "brandon-grotesque",sans-serif; }
h1 {font-family: eurostile-extended, sans-serif; font-weight: 900; font-size: 42px; text-transform:uppercase; letter-spacing: 2px; color:#191919; }
h2 {font-size: 42px; font-weight:400; margin-bottom: 20px; color: #191919;}
h2.eurostile {font-family: eurostile-extended, sans-serif; font-weight: 900; font-size: 42px; text-transform:uppercase; letter-spacing: 2px; }
h2.lime-text {color:#b3e429;}
h3 {font-size: 22px; font-weight:500; color: #152452/*#253245*/;text-transform: uppercase;}
h4 {color: #fff; }
#masthead h1.entry-title {color: #252525; padding-top: 35px; border-bottom: 1px dotted gray;}
.address h4 {color:#00d9ff;}
h5 {}
h6 { font-size: 12px; color: #191919; padding: 15px; margin-top: 15px; text-transform: uppercase; font-weight: 600; letter-spacing: 1.5px; line-height: 18px;} 
p {margin-bottom: 2em;}
article p:first-child {margin-top: 20px;}
address {margin-bottom: 0;}
a { color: #00d9ff; } /*#14b1ec*/
a.pdf-link {padding-right: 10px;}
a.pdf-link:after {content:"\f1c1"; font-family:'FontAwesome'; position: relative; left: 5px; }
a:visited { color: #b3e429; }
a:hover, a:focus, a:active { color: #b3e429; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
a.taptocall, a.taptocall:hover {color: #152452; cursor:default;}
.entry-content a {color:#00d9ff;}
.margin-left {margin-left: 35px;}
.margin-bottom {margin-bottom: 35px;}
.margin-top {margin-top: 35px;}
.margin-right {margin-right: 35px;}
.clearfix {clear:both;}
.bg-danger {padding: 20px;}
blockquote {padding: 35px; margin: 0 0 20px; color:#152452; font-size: 22px; font-weight:700; font-style: italic; border-left: 5px solid #152452; background-color:rgba(149,188,226,.5); }
article blockquote p:first-child {margin-bottom: 0; margin-top: 0;}
img.respon { max-width: 100%; height: auto; width: auto\9;}
img.attachment-post-thumbnail { max-width: 100%; height: auto; width: auto\9;}
aside {background-color: #fff; padding: 30px;}
.well {background-color:#fff;}
.margin-fix {padding-left: 0px; padding-right: 0px; margin-left:0px; margin-right:-15px;}
.relative {position: relative;}
.absolute {position:absolute;}
.btn-info { color: #fff; background-color: #00d9ff; border-color: #00d9ff;}
.btn-info:active:hover {color: #fff; background-color: #c8ff2e; border-color: #c8ff2e;}
.lime-border {border:1px solid #b3e429;}
.aqua-border {border:1px solid #00d9ff;}
.lime-text {color:#b3e429;}
.aqua-text {color:#00d9ff;}


/* ----------------------------------------------------------------------------
 HEADER
---------------------------------------------------------------------------- */
#header {font-family: 'Cuprum', sans-serif; font-style: normal; font-size:14px; font-weight:700;/* position:fixed;*/ z-index: 99999; width:101vw;}
#header .top-bar {background-color:#252525; border-bottom:1px solid #000; color: #fff; /*padding: 0 115px;*/}
#header .top-bar p {margin:0 0 0; padding-top:10px; padding-bottom:10px;}
#header .top-bar .taptocall, #header .top-bar .taptocall:hover {color:#fff;}
#header .top-bar ul.menu {list-style-type:none; margin-block-start: 0; padding-inline-start: 0; }
#header .top-bar .menu li {font-size:14px; line-height: 22px; display:inline-block;}
#header .top-bar .menu li a {font-family: 'Cuprum', sans-serif; font-style: normal; float:left; font-size:14px; font-weight:400; text-transform:uppercase; color:#bbb; padding:0; }
#header .top-bar .menu li a:hover {color:#fff;}
#header .top-bar .menu li.green-link a {color:#b3e429; /* #71a32f */  }
#header .top-bar .menu li.green-link a:hover {color:#c8ff2e;}
#header .top-bar #menu-menu-2 li:after {content:" / "; color:#565656; margin:0 10px; font-weight: normal;}
#header .top-bar #menu-menu-2 li:last-child:after {content:" "; margin-right:0;}
#header .top-bar .divider {color:#565656; margin-left:5px; margin-right:5px;}
#header .mid-bar {background-color:#191919; border-bottom:1px solid #505050; padding:1% 115px; }
#header .products-bar {background-color:#191919; border-bottom:1px solid #000; padding: 0 115px; }
#header form.search-form {width:270px; position:relative; top:12px; display:inline-block;}
#header form.search-form input.search-field {width:20px;}
#header form.search-form .input-group { position: relative; bottom: 1px; right:5px;}
#header form.search-form .input-group button.btn-info {-webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;}
#header form.search-form .input-group button.btn-info:hover {background-color: #b3e429; border-color: #b3e429;}

/* ----------------------------------------------------------------------------
 LOGO
---------------------------------------------------------------------------- */
a.logo {background: url('img/dockbox-logo.png'); width: 254px; height: 52px; display: block; text-indent: -99999vw;}


/* ----------------------------------------------------------------------------
 NAVAGATION
---------------------------------------------------------------------------- */
.bg-dark { background-color: #191919!important;}
.navbar-toggler { background-color: transparent; border: 1px solid #fff;}
.navbar-toggler-icon i { font-family: 'FontAwesome'; font-size: 22px; color: #aeaeae;}
.ml-auto {margin:0 auto!important;}
.navbar-dark .navbar-nav .nav-link { color: rgba(255,255,255,.35); text-align: center; transition: color 1s ease;}
.navbar-nav > li {width: 15vw;}
.navbar-nav > li > a {  border-right: 1px solid #505050;}
.navbar-nav > li:last-child > a {border-right:none;}
	/*.nav > li > a {padding:20px 115px;}*/
.navbar-inverse { background-color: #191919; border-bottom: 1px solid #000;}
.navbar-inverse .navbar-nav > li > a { color: #bbbbbb; text-transform: uppercase; font-size:18px; border-right: 1px solid #505050;}
.navbar-inverse .navbar-nav > li:last-child > a {border-right:none;}
.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > li > a:hover { color: rgba(255,255,255,.5); }
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > .active > a:hover { color: rgba(255,255,255,.5); }


/* ----------------------------------------------------------------------------
 CONTENT
---------------------------------------------------------------------------- */
#content { width: 100vw; height: 100%; }
.entry-content { width:70vw; margin: 8vh auto 12vh auto;}
header .page-header h1.entry-title { font-family: eurostile-extended, sans-serif; font-weight: 900; font-size: 42px; text-transform: uppercase; letter-spacing: 2px; color: #191919;}


/* ----------------------------------------------------------------------------
 PAGE SPECIFIC
---------------------------------------------------------------------------- */
/* ------ HOME ------ */
body.home header#header {position:absolute; }
.masthead {background-image: url('img/masthead.jpg'); background-position: -0 -230px; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; margin-right: -15px; margin-left: -30px; height:90vh;}
.masthead h1 {position: absolute; bottom: 10vh; left: 22%; text-align: center; background-color: rgba(255,255,255,.75); padding: 25px 50px;}
.masthead a {position: absolute; bottom: 3vh; left:48%; background-color: #00d9ff; padding: 10px 30px; font-family: 'Cuprum', sans-serif; font-style: normal; font-size:24px; color:#fff; text-shadow: 1px 1px 0 rgba(0,0,0,.5);}

section#four-cats {}

section#four-cats .top-left, 
section#four-cats .top-right, 
section#four-cats .bottom-left, 
section#four-cats .bottom-right {width:100%; height:400px; max-height:400px; text-align:center; overflow: hidden; position:relative;}

section#four-cats .top-left div, 
section#four-cats .top-right div, 
section#four-cats .bottom-left div, 
section#four-cats .bottom-right div { position:relative; padding: 200px 0; background-size:cover; background-position: 0 -210px; max-width: 100%; transform-origin: 50% 65%; transition: transform 1.05s, filter 1.05s ease-in-out; }

section#four-cats .top-left div:hover, 
section#four-cats .top-right div:hover, 
section#four-cats .bottom-left div:hover, 
section#four-cats .bottom-right div:hover { transform: scale(1.05);}

	section#four-cats .top-left .prod-name, 
	section#four-cats .top-right .prod-name,
	section#four-cats .bottom-left .prod-name,
	section#four-cats .bottom-right .prod-name {font-family: eurostile-extended, sans-serif; font-weight: 900; font-style: normal; color:#fff; text-transform:uppercase; font-size: 42px; text-shadow: 1px 1px 0 rgba(0,0,0,.5); text-align:center; margin:0 auto; position:absolute; top:40%; left:20%; z-index: 2;}	

	section#four-cats .top-left span.featcats-link a, 
	section#four-cats .top-right span.featcats-link a, 
	section#four-cats .bottom-left span.featcats-link a, 
	section#four-cats .bottom-right span.featcats-link a {font-family: 'Cuprum', sans-serif; font-style: normal; font-size:24px; color:#fff; text-shadow: 1px 1px 0 rgba(0,0,0,.5);text-align:center; margin:0 auto; position:absolute; top:55%; left:20%; width:auto; z-index: 2;}	

span.p10 a { width: 353px; height: 94px; line-height: 94px; position: absolute; top: 50%; left: 50%; margin-left: -176.5px; margin-top: -47px;}
span.p10 a:before, .p10 a:after { content: ''; position: absolute; width: 40px; height: 20px; border-color: #acff2a; border-style: solid; border-width: 0;
-webkit-transition: all 0.5s cubic-bezier(1, 0.2, 0.26, 0.7);
-moz-transition: all 0.5s cubic-bezier(1, 0.2, 0.26, 0.7);
transition: all 0.5s cubic-bezier(1, 0.2, 0.26, 0.7);
-webkit-transform: translate(0px, 0px) scale(0.8);
-moz-transform: translate(0px, 0px) scale(0.8);
-ms-transform: translate(0px, 0px) scale(0.8);
-o-transform: translate(0px, 0px) scale(0.8);
transform: translate(0px, 0px) scale(0.8);
opacity: 0;
}
span.p10 a:before { left: 0; bottom: 0; border-bottom-width: 1px; border-left-width: 1px;}
span.p10 a:after { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
span.p10 a:hover:before, .p10 a:hover:after {
-webkit-transition: all 2s cubic-bezier(0.14, 1.13, 0, 0.91);
-moz-transition: all 2s cubic-bezier(0.14, 1.13, 0, 0.91);
transition: all 2s cubic-bezier(0.14, 1.13, 0, 0.91);
opacity: 1;
}
span.p10 a:hover:before {
-webkit-transform: translate(-30px, -10px) scale(1);
-moz-transform: translate(-30px, -10px) scale(1);
-ms-transform: translate(-30px, -10px) scale(1);
-o-transform: translate(-30px, -10px) scale(1);
transform: translate(-30px, -10px) scale(1);
border-bottom-width: 5px;
border-left-width: 6px;
}
span.p10 a:hover:after {
-webkit-transform: translate(30px, 10px) scale(1);
-moz-transform: translate(30px, 10px) scale(1);
-ms-transform: translate(30px, 10px) scale(1);
-o-transform: translate(30px, 10px) scale(1);
transform: translate(30px, 10px) scale(1);
border-top-width: 5px;
border-right-width: 6px;
}

section#cta {background-color:#191919; background-image: url('img/bg-cta-dotted-map.jpg'); background-position:center center; height:300px; max-height:300px; text-align:center; padding:60px 0; margin-left:-30px; border-top:1px solid #404040; border-bottom:1px solid #000000;}
	section#cta h2 {text-align:center; color:#fff;}
	section#cta a {text-align: center; color:#fff; background-color:#191919; padding:10px 75px; }
	
section#features {background-color:#00d9ff; background-image:url('img/bg-water.jpg'); color:#fff; padding: 60px 100px; margin-left: -15px; border-top:1px solid #00dcf7;}
	section#features h2 { color:#fff;  font-family: 'eurostile-extended', sans-serif; font-weight: 900; font-size: 42px; text-transform: uppercase; letter-spacing: 2px;}
	section#features ol {font-family: 'eurostile-extended', sans-serif; font-weight: 900; font-size: 20px; text-transform: uppercase;}
	section#features ol li p {font-family: 'Cuprum', sans-serif; font-size:18px; font-weight: 400; font-style: normal; text-transform:none; padding:5px 10px; border-bottom:1px solid #fff; margin-bottom:0; margin:0;}
	section#features ol li:first-child {border-top: 1px solid #fff;}
	section#features ol li:nth-child(odd) {background-color: rgba(255,255,255,.25); }
	
/*
section#popular-products {background-color:#f4f4f4; padding: 60px 100px; margin-left:-15px;}
	.MultiCarousel { float: left; overflow: hidden; padding: 15px; width: 100%; position:relative; background-color:#fff;}
	.MultiCarousel .MultiCarousel-inner { transition: 1s ease all; float: left; }
	.MultiCarousel .MultiCarousel-inner .item { float: left; background-color:#fff;}
	.MultiCarousel .MultiCarousel-inner .item > div { text-align: center; padding:10px; margin:10px 15px; background: #ffffff; border: 1px double #eaeaea;}
	.MultiCarousel .leftLst, .MultiCarousel .rightLst { position:absolute; border-radius:50%;top:calc(50% - 20px); }
	.MultiCarousel .leftLst { left:0; }
	.MultiCarousel .rightLst { right:0; }
	.MultiCarousel .leftLst.over, .MultiCarousel .rightLst.over { pointer-events: none; background:#ccc; }
*/


/* ------ FEATURES ------ */
body.page-id-1610 ol.features-list li:before {color:#00d9ff; font-weight:900; margin-right:15px; font-family: 'Cuprum', sans-serif;}
body.page-id-1610 ol.features-list li {color:#00d9ff; margin-left: 15px; font-family: "brandon-grotesque",sans-serif; }
body.page-id-1610 ol.features-list {font-family: 'eurostile-extended', sans-serif; font-weight: 900; font-size: 20px; text-transform: uppercase;}
body.page-id-1610 ol.features-list li p {color:#191919; font-family: 'Cuprum', sans-serif; font-size:18px; font-weight: 400; font-style: normal; text-transform:none; padding:5px 10px; border-bottom:1px solid #fff; margin-bottom:0; margin:0;}
body.page-id-1610 ol.features-list li:first-child {border-top: 1px solid #fff;}
body.page-id-1610 ol.features-list li:nth-child(odd) p {background-color: rgba(0,0,0,.05); }


/* ------ MULTI PRODUCT PAGE ------ */
.boxes { padding: 15px; margin-bottom:25px;
-webkit-box-shadow: 0 0 3px 0 rgba(0,0,0,.5), inset 0 0 0 4px rgba(255,255,255,1), inset 0 0 0 5px rgba(0,0,0,.10); 
box-shadow: 0 0 3px 0 rgba(0,0,0,.5), inset 0 0 0 4px rgba(255,255,255,1), inset 0 0 0 5px rgba(0,0,0,.10);}
.boxes h3 {font-family: 'Cuprum', sans-serif; font-style: normal; font-size:16px; font-weight:700;}



/* ------ SINGLE PRODUCT PAGE ------ */
/****** single product page / product detail page **********/
h1.product-title {color:#14bee2; margin-bottom:45px;}
body.single-product .left-side strong {font-family: 'Cuprum', sans-serif; color:#152452; font-weight:700;}
body.single-product .left-side h3 {margin-top:25px; font-family: 'Cuprum', sans-serif; font-size: 30px; font-weight: 900; letter-spacing: 3px; color: #14bee2;}
.left-side h5.dim-inner,
.left-side h5.dim-outer{font-family: 'Cuprum', sans-serif; font-size:22px; }
.left-side h5.dim-inner:before {content:""; background-image: url("img/icon-inner-dim.png"); width: 34px; height: 34px; margin-right: 10px; background-position:0 0; display: inline-block;}
.left-side h5.dim-outer:before {content:""; background-image: url("img/icon-outer-dim.png"); width: 34px; height: 34px; margin-right: 10px; background-position:0 0; display: inline-block; }

body.single-product .right-side {}
#gallery {display: inline;}
figure {margin:1em 20px; border:1px solid #dee2e6;}
figure.feat-image img {width:100%; height: auto;}
.gallery figure, 
.gallery .gallery-item,
.gallery .gallery-item,
.gallery .gallery-item .gallery-icon {display: inline-block; width: auto!important;}
.gallery figure {background-color:#fff; padding: 8px; position: relative; box-shadow: 0 1px 3px rgba(0,0,0,0.25);}
.gallery figure .gallery-icon a img {width: 100px; height: 100px;}
.download-icon:after { content: "\f0ed"; font-family: 'FontAwesome'; font-size: 22px; color: #aeaeae; margin-left:15px;}

.product-navi {margin-top:60px;}
.product-navi nav h2 {font-size:24px; border-top:1px solid #c9c9c9; padding-top:20px;}
nav .nav-links .nav-previous,
nav .nav-links .nav-next {display:inline;}
nav .nav-links .nav-next {float:right;}

h2.factory-warranty {color:#243e8c; font-weight:900;}
h2.factory-warranty:before {content:url("img/icon-10-years.png"); position: relative; left: -5px;}





/* ------ CONTACT ------ */
body.page-id-1603 #map {height: 550px; border: 4px solid #fff; -webkit-box-shadow:0 0 0 1px #ddd; box-shadow:0 0 0 1px #ddd;}
.address i.fa-mobile {font-size: 24px!important;}
.address i.fa-envelope-o {font-size: 14px!important;}

.slick-btn { color: #fff; cursor: pointer; font-size: 16px; font-weight: 400; line-height: 45px; margin: 0 5px 2em 5px; max-width: 160px; position: relative; text-decoration: none; text-transform: uppercase; width: 100%;}
.slick-btn:hover {text-decoration:none;}
.slick-btn-lime { background: #191919; font-weight: 100; }
.slick-btn-lime svg { height: 45px; left: 0; position: absolute; top: 0; width: 100%; }
.slick-btn-lime rect { fill: none; stroke: #b3e429; stroke-width: 2; stroke-dasharray: 422, 0; -webkit-transition: all 0.35s linear; transition: all 0.35s linear;}
.slick-btn-lime:hover { background: rgba(225, 51, 45, 0); font-weight: 900; letter-spacing: 1px; }
.slick-btn-lime:hover rect { stroke-width: 5; stroke-dasharray: 15, 310; stroke-dashoffset: 193; -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); }

.slick-btn-aqua { background: #191919; font-weight: 100; }
.slick-btn-aqua svg { height: 45px; left: 0; position: absolute; top: 0; width: 100%; }
.slick-btn-aqua rect { fill: none; stroke: #00d9ff; stroke-width: 2; stroke-dasharray: 422, 0; -webkit-transition: all 0.35s linear; transition: all 0.35s linear;}
.slick-btn-aqua:hover { background: rgba(225, 51, 45, 0); font-weight: 900; letter-spacing: 1px; }
.slick-btn-aqua:hover rect { stroke-width: 5; stroke-dasharray: 15, 310; stroke-dashoffset: 184; -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); }




/* ----------------------------------------------------------------------------
 FOOTER, BREADCRUMBS & COPYRIGHT
---------------------------------------------------------------------------- */
footer#footer {background-color: #191919; border-top:1px solid #000; padding:0 115px; color:#fff; font-size:14px; margin-top:65px;}
.breadcrumbs {border-bottom:1px solid #000; border-top: 1px solid #000; padding: 20px; margin: 0 -15px 0 -15px; background-color: #191919;}
.breadcrumbs .breadcrumb-note {display:inline; color:#b3e429; font-weight:700;}
.breadcrumbs .breadcrumb-note:before {content:"\f02e"; font-family:'FontAwesome'; position: relative; left: -5px; color:#b3e429; font-weight: normal;}
.breadcrumbs a.first-crumb {color:#00d9ff;}
footer#footer #roots {margin-top:35px; margin-bottom:30px;}
footer#footer #roots h4 {color:#fff; text-transform:uppercase; font-weight:normal; margin-top:0;}
footer#footer #roots p {margin-top:15px; margin-bottom:0; font-size:14px; line-height:22px; font-weight:200;}
footer#footer #roots a.taptocall,
footer#footer #roots a.taptocall:hover {color:#fff; text-decoration:none; font-style:normal;}
footer#footer #roots a.more {font-size:14px; text-transform:uppercase; text-decoration: underline; color:#00d9ff; text-align: right;}
footer#footer #roots a.more:hover {font-style: italic; color:#b3e429;}
footer#footer #roots ul.menu {list-style-type:none; margin-block-start: 0; padding-inline-start: 0; margin-top:25px;}
footer#footer #roots li {font-size:14px; line-height: 22px;}
footer#footer #roots .column-third img {display:inline-block;}
footer#footer #roots .column-fourth .address p,
footer#footer #roots .column-fourth .phone p,
footer#footer #roots .column-fourth .fax p {margin-left:15px; padding-left:15px;}
footer#footer #roots .column-fourth .address p:before {content:"\f041"; font-family:'FontAwesome'; position: relative; left: -10px; color:#b3e429; font-weight: normal;}
footer#footer #roots .column-fourth .phone p:before {content:"\f095"; font-family:'FontAwesome'; position: relative; left: -10px; color:#b3e429; font-weight: normal;}
footer#footer #roots .column-fourth .fax p:before {content:"\f1ac"; font-family:'FontAwesome'; position: relative; left: -10px; color:#b3e429; font-weight: normal;}
footer#footer .search-form .input-group {width: 90%; padding-left: 15px;}
footer#footer .input-group-btn:last-child > .btn {margin-top: -1px;}
#copyright {font-size:14px; background: #191919; border-top:1px solid black; line-height: 20px; padding:30px; color:#fff; }

/* --- Gravity Forms --- */
.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {height: 34px;}
.gform_wrapper .top_label div.ginput_container { margin-top: 0px!important;}
.gform_wrapper .gsection {border-bottom: none!important; margin-bottom: 0!important;}
.gform_wrapper .gsection h2.gsection_title { border-top: 1px solid #aeaeae; border-bottom: 3px solid #152452; margin: 60px 0 0 0!important; margin-top: 60px!important; padding: 15px 0 15px 5px!important; background-color:#e6e6e6; color:#152452; text-transform: uppercase; font-style: italic; text-align: center;}


/* ----------------------------------------------------------------------------
 CMB2 CUSTOMIZATIONS
---------------------------------------------------------------------------- */
.cmb-type-title {background-color:#191919!important; }
.cmb-type-title h5.cmb2-metabox-title {color:#fff!important; font-weight:bold!important;}

/* ----------------------------------------------------------------------------
   RESPONSIVE
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
---------------------------------------------------------------------------- */
@media (min-width: 320px) { 
	#header .top-bar{ padding: 0 0px;}
	#header .top-bar .phones p {padding-bottom:0;}
	#header .top-bar .menu-menu-2-container ul {margin-block-end: 0em; padding-top:0px;}
	#header .products-bar,
	footer#footer { padding: 0;}
	#header .mid-bar form.search-form {display:none; visibility: hidden;}
	
	.navbar-nav > li {display:block; width:100%;}
	.nav > li > a { padding: 20px 15px;}
	.navbar-nav > li > a { border-right: none;}
	.navbar-inverse { background-color: #191919; border-bottom: 1px solid #000;}
	
	h1 {font-size:22px;}
	.masthead {background-size:contain; background-position: -0 170px;  background-attachment: revert; height:70vh;}
	.masthead h1 {padding:15px 25px; left: 12%; /*bottom: 24vh;*/ width: 80%;}
	.masthead a {left: 28%; /*bottom:14vh;*/}
	h2, section#features h2 {font-size:22px}
	section#features {padding:60px 30px;}
	section#cta {margin-left:0;}
	
	section#four-cats .top-left,
	section#four-cats .top-right,
	section#four-cats .bottom-left,
	section#four-cats .bottom-right { width: 100%; height: 235px; max-height: 235px; text-align:left;}
	
	section#four-cats .top-left div, 
	section#four-cats .top-right div, 
	section#four-cats .bottom-left div, 
	section#four-cats .bottom-right div { position:relative; padding: 118px 0;  background-size:cover; background-position: 0 0;  }
	
	section#four-cats .top-left .prod-name,
	section#four-cats .top-right .prod-name,
	section#four-cats .bottom-left .prod-name,
	section#four-cats .bottom-right .prod-name {font-size:26px; left:10%; top:30%; text-align:left;}
	
	footer .column-first,
	footer .column-second,
	footer .column-third {border-bottom:1px solid black; padding-bottom:35px; margin-bottom:35px;}
	#header .mid-bar {padding: 5% 25px;}
	footer .column-third img {display:none;}
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
	#header .top-bar,
	#header .mid-bar,
	#header .products-bar,
	footer#footer { padding: 0 25px;}
	#header .mid-bar form.search-form {display:inline-block; visibility: visible;}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
	#header .top-bar,
	#header .mid-bar,
	#header .products-bar,
	footer#footer { padding: 0 25px;}
	#header .top-bar .phones p {padding-bottom:10px;}
	#header .mid-bar {padding: 2% 25px;}
	#header .mid-bar form.search-form {display:inline-block; visibility: visible;}
	#header .top-bar .menu-menu-2-container ul {margin-block-end: 0em; padding-top:10px;}
	.navbar-inverse { background-color: transparent; border-color: transparent;}
	.navbar-nav > li { display: inline-block; width: 15vw;}
	.navbar-nav > li > a { border-right: none;}
	section#features {padding:60px 60px;}
	.masthead {background-size:cover; background-position: -0 50px; }
	.masthead a {left: 43%;}
	section#four-cats .top-left,
	section#four-cats .top-right,
	section#four-cats .bottom-left,
	section#four-cats .bottom-right { width: 100%; height: 400px;}
	section#four-cats .top-left div, 
	section#four-cats .top-right div, 
	section#four-cats .bottom-left div, 
	section#four-cats .bottom-right div { position:relative; padding: 200px 0; background-size:contain; background-position: 0 -80px; max-width: 100%; transform-origin: 50% 65%; transition: transform 1.05s, filter 1.05s ease-in-out; }
	section#four-cats .top-left .prod-name,
	section#four-cats .top-right .prod-name,
	section#four-cats .bottom-left .prod-name,
	section#four-cats .bottom-right .prod-name {font-size:26px; left:10%; top:40%; text-align:left;}
	
	footer .column-third img {display:inline-block;}

	footer .column-first,
	footer .column-second,
	footer .column-third { border-bottom: 1px solid black; padding-bottom: 35px; margin-bottom: 35px;}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	#header .top-bar,
	#header .mid-bar,
	#header .products-bar,
	footer#footer {padding: 0 115px; }
	.nav > li > a {padding: 20px 55px;}
	.navbar-nav > li > a { border-right: 1px solid #505050;}
	.navbar-inverse .navbar-nav > li > a {border-right:1px solid #505050;}
	.masthead {height:85vh;}
	section#four-cats .top-left .prod-name,
	section#four-cats .top-right .prod-name,
	section#four-cats .bottom-left .prod-name,
	section#four-cats .bottom-right .prod-name {text-align:center;}
	footer#footer {padding: 0 30px;}
	footer .column-first,
	footer .column-second,
	footer .column-third {border-bottom:none; padding-bottom:5px; margin-bottom:5px;}
}

@media (min-width:1024px) {
	header#header .mid-bar {padding:2% 115px;}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
	h1, h2 {font-size:42px}
	#header .top-bar {padding: 0 115px;}
	#header .mid-bar {padding: 1% 115px;}
	#header .mid-bar form.search-form {display:inline-block;}
	section#features {padding:60px 100px;}
	section#four-cats .top-left .prod-name,
	section#four-cats .top-right .prod-name,
	section#four-cats .bottom-left .prod-name,
	section#four-cats .bottom-right .prod-name {font-size:42px; left:20%;}
	section#four-cats .top-left,
	section#four-cats .top-right,
	section#four-cats .bottom-left,
	section#four-cats .bottom-right { width: 100%; height: 400px; max-height: 400px; }
	section#four-cats .top-left div, 
	section#four-cats .top-right div, 
	section#four-cats .bottom-left div, 
	section#four-cats .bottom-right div { background-size:cover;}
	.masthead { background-attachment: fixed;}
		footer .column-first,
	footer .column-second,
	footer .column-third {border-bottom:none; padding-bottom:5px; margin-bottom:5px;}
}

@media (min-width:1440px){
	.masthead { background-size: cover; background-position: -0 -160px;}
}