/*
Theme Name: Stackable Child
Theme URI: https://wp-themes.com/stackable
Author: ChildThemeWP.com
Author URI: https://childthemewp.com
Description: My WordPress Stackable child theme.
Template: stackable
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Version: 1.0.0
Text Domain: stackable-child
*/
 

body { font-family: 'Raleway', sans-serif; font-size: 20px; overflow-x: hidden; }

header#masthead { position: fixed; z-index: 999; top: 0; left: 0; width: 100vw; height: 146px; padding: 0; box-shadow: 0 0px 8px rgba(0,0,0,0.25); transition: all 333ms ease-in-out; }
header#masthead.sticky { height: 124px; }
.logged-in header#masthead { top: 32px; }
.site-header-wrapper { width: 100%; height: 100%; padding: 0; }
.site-header-wrapper .container > div { height: 100px; display: flex; align-items: center; transition: all 333ms ease-in-out; }
header#masthead.sticky .site-header-wrapper .container > div { height: 72px; }
.site-branding { padding: 0; margin: 0; }
.site-branding img { height: 100%; width: auto; transition: all 333ms ease-in-out; }
.site-branding img.horizontal { height: 124px; }
header#masthead.sticky .site-branding img.horizontal { height: 92px; }
.site-info { text-align: right; justify-content: end; }
.site-info .phone { font-size: 24px; font-weight: 700; color: #be5c2f; margin: 0; line-height: 1.5; }
.site-info .addr { font-size: 16px; color: #899095; }

body:not(.no-sidebar) .site-content-wrapper, .no-sidebar .comments-area, body:not(.no-sidebar) .content-area { width: 100vw; min-width: 100vw; padding: 0; }

.menu-toggle { display: block; position: absolute; margin: auto; top: 0; bottom: 0; width: 34px; height: 34px; text-align: left; background: transparent; color: #000; font-size: 0; padding: 0; }
button.menu-toggle:hover, button.menu-toggle:focus { background: transparent; }
.menu-toggle a { display: block; font-size: 15px; font-weight: 700; line-height: 46px; border: 1px solid #134734; padding: 0 14px; color: #000; cursor: pointer; }
.menu-toggle a:hover { text-decoration: none; }
.menu-toggle-lines { display: inline-block; width: 28px; line-height: 3px; text-align: right; vertical-align: top; margin-left: 8px; margin-top: 10px; }
.menu-toggle span { width: 34px; height: 3px; margin-bottom: 4px; display: inline-block; background: #000; border-radius: 1.5px; transition: all 333ms ease-in-out; }
.menu-toggle span + span { width: 24px; }
.menu-toggle span + span + span { width: 12px; margin-bottom: 0; }
.main-menu { position: absolute; background: #fff; max-width: 0; width: 0; left: 0; top: 108px; z-index: 99; height: calc(100vh - 108px); overflow: hidden; /*overflow-y: auto;*/ transition: all 333ms ease-in-out; }
.main-menu.shown { max-width: 33vw; width: 33vw; box-shadow: 4px 8px 16px rgb(0 0 0 / 40%); } 
.main-menu .menu-toggle a { border: 1px solid #fff; }
.main-menu.shown .menu-toggle span, .menu-toggle.opened span { transform: rotate(45deg) translate(8px, 3px); }
.main-menu.shown .menu-toggle span + span, .menu-toggle.opened span + span { transform: rotate(135deg) translate(-2px, -3px); width: 34px; }
.main-menu.shown .menu-toggle span + span + span, .menu-toggle.opened span + span + span { opacity: 0; }

#menu-main-menu li { list-style: none; }
#menu-main-menu li a { position: relative; line-height: 60px; height: 60px; padding: 0 15px; display: block; color: #000; text-transform: uppercase; text-decoration: none; font-size: 20px; font-weight: bold; border-bottom: 2px solid transparent; }
#menu-main-menu li.menu-item-has-children > a .fa { cursor: pointer; transition: all 555ms ease-in-out; display: inline-block; position: absolute; top: 0; bottom: 0; right: 0; height: 60px; line-height: 60px; width: 60px; text-align: center; margin: auto; }
#menu-main-menu li.menu-item-has-children > a .fa:hover { background: transparent; }
#menu-main-menu li ul { position: relative; z-index: 99; max-height: 0; width: 50vw; left: 0; top: 0; padding: 0; background: transparent; overflow-y: auto; transition: all 555ms ease-in-out; }
#menu-main-menu li.menu-item-has-children.shown ul { max-height: 10000px; }
#menu-main-menu li.menu-item-has-children > a .fa:before { display: inherit; transition: all 555ms ease-in-out; }
#menu-main-menu li.menu-item-has-children.shown > a .fa:before { transform: rotate(180deg); }
#menu-main-menu > li a:hover { background: transparent; }
#menu-main-menu > li ul li a { line-height: 44px; height: 44px; font-size: 18px; }
.main-navigation .primary-menu .current_page_item > a:hover, .main-navigation .primary-menu .current-menu-item > a:hover, .main-navigation .primary-menu .current_page_ancestor > a:hover { border-bottom: 2px solid #000; }

  
.hentry { padding: 0; margin: 0; }
.entry-hero-wrapper, .hentry-wrapper, .site-content-wrapper, .site-footer-wrapper, .site-header-wrapper, .site-content-wrapper .has-post-thumbnail .entry-header-wrapper, .widget-area-wrapper { max-width: unset; }
 
.draft { display: none !important; }
.padding-header { margin-top: 146px !important; }
 
h1 { font-size: 36px; color: #d5bc7f; }
h2 { font-size: 36px; color: #d5bc7f; }
h3 { font-size: 55px; color: #d5bc7f; }
h4 { font-size: 20px; color: #d5bc7f; margin: 0 0 1em; }
h5 { font-size: 18px; line-height: 1.33; color: #092a45; }

h1, h2, h3 { font-weight: 400; } 
h4 { font-weight: 500; }
h5, h6 { font-weight: 700; }
p, li { font-size: 18px; line-height: 1.33; }
p.leading { font-size: 24px; }
 
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, select:focus, textarea:focus { background: transparent; outline: 1px solid #89BD41; outline-offset: -2px; } 

.page-custom-header { height: 349px; }
.page-custom-header .overlay { background: rgba(255,255,255,0.33); padding-top: 146px; height: 100%; }
.page-custom-header .overlay .container { height: 100%; }
.page-custom-header .twrap { display: table; text-align: center; width: 100%; height: 100%;  }
.page-custom-header .cwrap { display: table-cell; vertical-align: middle; }

.page-custom-header h1 { color: #000; font-size: 24px; font-weight: 700; line-height: 32px; }
.page-custom-header h2 { font-size: 36px; color: #000; line-height: 48px; }

.site-content#content { overflow-x: visible; margin-top: 146px; }

.hero_bg { height: 50vh; min-height: 350px; max-height: 500px; }
.hero_content { background: #304273; }
.hero_content .container { padding: 60px 0 76px; text-align: center; max-width: 860px }
.hero_content h1, .hero_content h2, .hero_content h3, .hero_content h4 { color: #eeefef; margin: 0 auto 0.75em; max-width: 660px; }
.hero_content p { color: #f6f5f2; font-weight: 300; text-align: center; max-width: 804px; margin: auto; }
 
.site-main .inner .hero { margin-bottom: 24px; }
.site-main .inner .overlay { min-height: 250px; display: flex; align-items: center; justify-content: center; text-align: center;background: rgba(48, 66, 115,0.5); }
.site-main .inner h1.page-title { color: #fff; font-size: 36px; margin: 0 0 0.75em; }

.about { background: #e5e5e4; }
.about .container { padding: 36px 15px 48px; }
.about_wrap h2, .about_wrap h3, .about_wrap h4 { color: #be5c2f; font-size: 36px; text-align: center; margin: 1em 0; }
.about_wrap p { color: #3f475c; margin: 1em 0 2.5em; }
.about_wrap ul { color: #3f475c; margin-top: 1em; margin-bottom: 2.5em; }
.about_wrap .wp-caption .wp-caption-text { border: 0; font-size: 18px; font-style: normal; text-align: center; }

.about_wrap .alignleft { margin-right: 2.5em !important; margin-bottom: 1.5em; }
.about_wrap .alignright { margin-left: 2.5em !important; margin-bottom: 1.5em; }

.bullets .container { padding: 72px 15px 60px; text-align: center; max-width: 860px; }
.bullets h2 { color: #ead49e; margin: 0 auto 1em; max-width: 660px; }
.bullets ul { column-count: 2; text-align: left; }
.bullets p, .bullets li { color: #f6f5f2; }

.services { background: #a74f27; }
.services .container { padding: 72px 15px 72px; text-align: center; max-width: 890px; }
.services h2 { color: #faf9f7; text-align: center; }
.services ul { margin: 0 0 1.5em 0.875em; }
.services p { color: #f6f5f2; }
.services li { color: #f6f5f2; margin-bottom: 3px; }
.services .service:first-of-type::before { display: none; }
.services .service { text-align: left; margin: 60px 0; padding-top: 60px; position: relative; }
.services .service:first-of-type { padding-top: 0; }
.services .service:last-of-type { margin-bottom: 12px; }
.services .service h4 { font-size: 23px; line-height: 24px; color: #f9f8f7; }
.services .service:before { content: ''; position: absolute; display: block; top: 0; left: 15px; width: calc(100% - 30px); height: 1px; background: #b27252; }

footer { position: relative; }
.prefooter { background: #304273; }
.prefooter .container { padding: 72px 15px 84px; }
.prefooter .logo_wrap { margin-top: 4px; margin-bottom: 44px; }
.prefooter .logo_wrap img { height: 140px; }
.prefooter h5, .prefooter p { margin-bottom: 1.5em; color: #fff; }
.prefooter p strong { font-weight: 500; }
.prefooter p a { color: #fff; }
.prefooter p a.btn { margin-left: 0; }
.prefooter .ftleft, .prefooter .ftright { text-align: left; }

.footer-bottom { background: #fff; color: #304273; }
.footer-bottom .container { padding: 30px 15px; }
.footer-bottom .container p { margin: 0; }

.noPad { padding-right: 0 !important; padding-left: 0 !important; }
.noPadR { padding-right: 0 !important; }
.noPadL { padding-left: 0 !important; }
.xPadR { padding-right: 30px !important; }
.xPadL { padding-left: 30px !important; }

.clear { clear: both; }
.about_wrap hr.clear { margin: 0; border-top: 1px solid #e5e5e4; }

.blue_btn, .blue.btn { display: block; font-size: 14px; line-height: 40px; text-transform: uppercase; padding: 0 32px; text-align: center; max-width: 156px; margin: 12px auto 0; color: #fff; background: #304273; border-radius: 0; }
.white_btn, .white.btn { display: block; font-size: 14px; line-height: 40px; text-transform: uppercase; padding: 0 32px; text-align: center; max-width: 156px; margin: 12px auto 0; color: #304273 !important; background: #fff; border-radius: 0; }
.entry-content a.blue_btn:hover, .entry-content a.blue.btn:hover, .entry-content a.blue_btn:focus, .entry-content a.blue_btn:active { color: #fff !important; }
.entry-content a.white_btn:hover, .entry-content a.white.btn:hover { color: #304273; }
.entry-content a.white_btn:hover { color: inherit; }

.product_blocks { text-align: center; position: relative; z-index: 3; }
.product_block figure { display: block; position: relative; overflow: hidden; width: 100%; padding-bottom: 120%; transition: all 333ms linear; }
.product_block figure img { display: block; position: absolute; z-index: 11; height: 167%; width: auto; margin: auto; top: 20%; left: 0; right: 0; transition: all 333ms linear; }
.product_block div { text-align: center; }
.product_block a { text-decoration: none;  }

.site-main.contact .main-content .container { max-width: 760px; }
.wpcf7 label { width: 100%; font-weight: 400; font-size: 16px; display: block; margin-top: 8px; }
.wpcf7 label input { width: 100%; }
.wpcf7-form-control.wpcf7-submit { display: block; font-size: 14px; line-height: 40px; text-transform: uppercase; padding: 0 32px; text-align: center; max-width: 156px; margin: 12px auto 0; color: #fff !important; background: #304273; border-radius: 0; color: #304273; }


.product_block figure img {
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
}
.product_block a:hover figure img {
  -webkit-animation-name: hvr-bob-float, hvr-bob;
  animation-name: hvr-bob-float, hvr-bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}
@keyframes hvr-bob-float {
  100% {
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
  }
}
@keyframes hvr-bob{
  0% {
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
  }
  50% {
      -webkit-transform: translateY(-4px);
      transform: translateY(-4px);
  }
  100% {
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
  }
}
 
.product_block a:hover .wave { transition: all 333ms ease-in-out; opacity: 0;  }
.product_block a:hover .wave {
  background: url(images/wave_bg.svg) repeat-x; 
  position: absolute;
  z-index: 8;
  bottom: 0;
  width: 3200px;
  height: 198px;
  animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.product_block a:hover .wave:nth-of-type(2) {
  bottom: -36px;
  animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
  opacity: 1;
}

@keyframes wave {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -1600px;
  }
}

@keyframes swell {
  0%, 100% {
    transform: translate3d(0,-25px,0);
  }
  50% {
    transform: translate3d(0,5px,0);
  }
}

 
@media(max-width:1200px) { 

}

@media(max-width:991px) {
  .site-header-wrapper { padding: 0; }
  .site-header-wrapper .container { width: 94%; }
  .company_info { max-width: 255px; }

  section { width: 100vw; }
}
 
@media(max-width:768px) {
    .xs-hidden { display: none !important; }
    .about_wrap hr.clear { display: none; }
    .hero_bg, .inner .hero { background-position: left 15% center !important; }
}

@media(min-width: 768px) {
  .sm-hidden, .xs-visible { display: none; }
}

@media(max-width: 767px) {
  header#masthead, header#masthead.sticky { position: relative; height: 146px !important; }
  .site-header-wrapper .container { width: 100%; }
  .site-header-wrapper .container .site-branding { height: auto; text-align: center; justify-content: center; }
  .site-header-wrapper .container .site-info { height: 118px; padding-right: 0; text-align: right; justify-content: end; }

  .site-branding .logo_wrap { margin: 4px 0; }
  .company_info { max-width: 255px; }
  .site-info .phone { font-size: 22px; }
  .site-info .addr { font-size: 15px; }
  .site-info .addr span { display: block; font-size: 0; }
  .site-content#content { margin-top: 0; }
  .hero_bg { height: 33vh; min-height: 250px; max-height: 400px; }
  .hero_content .container { padding: 44px 15px; }
  .entry-content, .entry-summary { margin: 0 15px; }

  .services .service { text-align: center; }
  .services .service ul { max-width: 280px; margin-left: auto; margin-right: auto; padding-left: 0.5em; text-align: left; }
  .services .service img { margin-top: 12px; }
  .about_wrap .alignleft, .about_wrap .alignright { display: block; margin-left: auto !important; margin-right: auto !important; float: none !important; }

  .xPadR, .xPadL { padding-right: 30px !important; padding-left: 30px !important; }
  .prefooter, .footer-bottom { text-align: center; }
  .prefooter .logo_wrap { margin-bottom: 12px; }  
  .prefooter h5 { margin-top: 2em; margin-bottom: 0.5em; }
  .sm-hidden, .xs-visible { display: block; }

  .prefooter .ftleft, .prefooter .ftright { text-align: center; }
  .prefooter p a.btn { margin-left: auto; margin-right: auto; }

}

@media(max-width: 640px) {
  h2, .about_wrap h2, .about_wrap h3, .about_wrap h4 { font-size: 32px; }
  .site-info .phone { font-size: 21px; }
  .site-info .addr { font-size: 14px; }
  .services .container { padding: 48px 15px; }
  .about .container { padding: 24px 15px 32px; }
}

@media(max-width: 480px) {
  .site-branding img.horizontal { width: 100%; height: auto; }
  .site-info .phone { font-size: 20px; }
  .site-info .addr { font-size: 14px; }
}

@media (max-width: 414px) {
  .site-header-wrapper .container { width: 94%; padding: 0; }
}

@media (max-width: 390px) {
  .site-header-wrapper .container .site-info { padding-bottom: 15px; }
  .site-info .addr { font-size: 13px; }
}