/*   
Theme Name: Kaucher & Associates, P.A.
Author: Sandlapper Creative
Author URI: http://www.sandlappercreative.com
Version: 1.0
*/

/*Reset*/
a,hr{padding:0}a,input[type=checkbox]{vertical-align:baseline}article,aside,figure,footer,header,hgroup,hr,img.aligncenter,nav,section{display:block}abbr,address,article,aside,audio,b,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0;margin:0;padding:0}td,td img{vertical-align:top}embed,img,object{max-width:100%;height:auto;}html{overflow-y:scroll}ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}a{font-size:100%;background:0 0;margin:0}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help}.alignleft,img.alignleft{float:left;margin:15px 15px 15px 0}alignright,img.alignright{float:right;margin:15px 0 15px 15px}.aligncenter,img.aligncenter{margin:15px auto}table{border-collapse:collapse;border-spacing:0;font:100%}th{vertical-align:bottom}td{font-weight:400}hr{height:1px;border:0;border-top:1px solid #ccc;margin:1em 0}input,select{vertical-align:middle}pre{white-space:pre-line;word-wrap:break-word}input,select,textarea{font:99% sans-serif}a:active,a:hover{outline:0}small{font-size:85%}strong,th{font-weight:700}sub,sup{font-size:75%;line-height:0;position:relative}sup{top:-.5em}sub{bottom:-.25em}code,kbd,pre,samp{font-family:monospace,sans-serif}.clickable,button,input[type=button],input[type=submit],label{cursor:pointer}button,input,select,textarea{margin:0}button{width:auto;overflow:visible}.ie7 img{-ms-interpolation-mode:bicubic}.ie6 html{filter:expression(document.execCommand("BackgroundImageCache",false,true))}.clearfix:after,.clearfix:before{content:"\0020";display:block;height:0;overflow:hidden}.clearfix:after{clear:both}.clearfix{zoom:1}.ie6 input,input[type=radio]{vertical-align:text-bottom}


/* Fonts */

@font-face {
    font-family: 'GabrielSans';
    src: url('./_/fonts/gabrielsans-bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'GabrielSansCondensedItalic';
    src: url('./_/fonts/gabrielsans-condensed-italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'GabrielSansCondensed';
    src: url('./_/fonts/gabrielsans-condensed.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/*Styles*/

body{}
body, select, input, textarea{ font-family: "GabrielSansCondensed", Helvetica, Arial, sans-serif;}

a{ color: #03f;}
a:hover, a:focus{ color: #69f;}
.button, button{ -webkit-appearance: none; display: inline-block; font-family: "GabrielSans", Helvetica, Arial, sans-serif; text-decoration: none; color: #231F20; border: 1px solid #231F20; border-radius: 200px; font-size: 16px; line-height: 16px; letter-spacing: .075em; padding: 10px 20px 13px;}
.button:hover, button:hover, .button:focus, button:focus{ color: #F1BE66; border: 1px solid #F1BE66;}
.screen-reader{ position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;}

h1, h2, h3, h4, h5, h6{ line-height: normal; font-weight: normal; font-family: "GabrielSans", Helvetica, Arial, sans-serif;}
h1{ font-size: 42px; line-height: 42px;}
h2{}
h3{}
h4{}
h5{}
h6{}

h1 span, h2 span, h3 span, h4 span, h5 span, h6 span, b, strong{ font-family: "GabrielSans", Helvetica, Arial, sans-serif;}

.page-wrap{}
.wrapper, .container{ width: 90%; max-width: 1200px; margin: 0 auto;}
.container{ display: flex;}
.wrapper:after{ content: ""; display: table; clear: both;}

nav ul{ list-style: none; position: relative; float:left; margin:0; padding:0;}
nav ul a{ display: block; line-height: 32px; text-decoration: none;}
nav ul li{ position: relative; float: left; margin: 0; padding: 0;}
nav ul li.current-menu-item a, .nav ul li:hover > a{}
nav ul ul{ display: none; position: absolute; top: 100%; left: 0; padding: 0; text-align: left;}
nav ul ul li{ float: none; width: 200px;}
nav ul ul a{ line-height: 120%;}
nav ul ul ul{ top: 0; left: 100%;}
nav ul li:hover > ul{ display: block;}

.header{ padding: 20px 0; background-color: #fff; box-shadow: 0px 1px 8px 0px rgba(241,190,102,0.25); position: fixed; top: 0; left: 0; width: 100%; z-index: 999;}
.logged-in .header{ top: 32px;}
.header .container{ justify-content: space-between; align-items: center;}
.header .logo{ width: 100px; margin: 0 70px;}
.header .nav{ width: calc(50% - 120px); display: flex; font-size: 18px;}
.header .nav li{ margin: 0 0 0 70px;}
.header .nav:nth-of-type(1) li:nth-of-type(1), .header .nav:nth-of-type(2) li:nth-last-of-type(1){ margin: 0;}
.header .nav:nth-of-type(1){ justify-content: flex-end;}
.header .nav:nth-of-type(2) li{ margin: 0 70px 0 0;}
.header .nav a{ color: #231F20;}
.header .nav li:hover > a{ color: #F1BE66;}

#rmp_menu_trigger-496:hover{ border: none;}

.content{ margin-top: 145px;}
.content p{ margin-top: 15px;}
.content ul{ list-style: disc; margin: 15px 0 0 30px;}
.content ol{ margin: 15px 0 0 30px;}
.meta{}

.navigation{ padding: 0; text-align: center;}
.navigation li a, .navigation li a:hover, .navigation li.active a, .navigation li.disabled{ color: #fff; text-decoration: none;}
.navigation li{ display: inline;}
.navigation li a, .navigation li a:hover, .navigation li.active a, .navigation li.disabled{ background-color: #666; cursor: pointer;}
.navigation li a:hover, .navigation li.active a{ background-color: #333;}

.search-form{}
.search-input{}
.search-submit{}

.footer{ background-image: url(images/footer.jpg); background-size: cover; background-position: center center; padding: 60px 0; color: #fff; font-size: 14px; line-height: 18px;}
.footer .container{ justify-content: space-between; align-items: center;}
.footer .column{ width: calc(50% - 50px);}
.footer .column:nth-of-type(1):before{ content: "\f3c5"; font-family: "Font Awesome", FontAwesome, "Font Awesome 6 Free"; float: left; margin: 0 10px 30px 0;}
.footer img{ max-width: 100px;}
.footer a{ color: #fff; text-decoration: none;}
.footer a:hover{ color: #F1BE66;}
.footer .address, .footer .social-heading span{ font-family: "GabrielSans", Helvetica, Arial, sans-serif;}
.footer .address-note{ font-size: 13px; margin-top: 6px;}
.footer .column:nth-of-type(2){ display: flex; justify-content: flex-end; text-align: center;}
.footer .social-heading{ margin-bottom: 15px;}
.footer .social-heading span{ display: block;}
.footer .column:nth-of-type(2) a{ font-size: 24px;}
.footer .sub-footer{ text-align: center; font-size: 14px;}
.footer .sub-footer:before{ width: 120px; height: 1px; background-color: #fff; display: block; content: ""; margin: 10px auto 25px;}

.video-wrapper{ position: relative; padding-bottom: 56.25%; height: 0;}
.video-wrapper iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.tabs input{ position: absolute; opacity: 0; z-index: -1;}
.tabs .row{ display: flex;}
.tabs .row .col{ flex: 1;}
.tabs .row .col:last-child{ margin-left: 1em;}
.tabs{ overflow: hidden;}
.tabs .tab{ width: 100%; overflow: hidden;}
.tabs .tab-label{ display: flex; justify-content: space-between; padding: 15px 20px; cursor: pointer;}
.tabs .tab-label:hover{}
.tabs .tab-label::after{ content: "\f107"; font-family: "Font Awesome", FontAwesome, "Font Awesome 6 Free"; margin: 5px 10px 0 0;}
.tabs .tab-content{ max-height: 0; padding: 0 30px; transition: all 0.35s; display: none; visibility: hidden; opacity: 0; font-style: italic;}
.tabs .tab-content p:nth-of-type(1){ margin-top: 0;}
.tabs .tab-close{ display: flex; justify-content: flex-end; padding: 1em; cursor: pointer;}
.tabs .tab-close:hover{}
.tabs input:checked + .tab-label{ padding-bottom: 10px;}
.tabs input:checked + .tab-label::after{ content: "\f106"; font-family: "Font Awesome", FontAwesome, "Font Awesome 6 Free"; color: #F1BE66;}
.tabs input:checked ~ .tab-content{ max-height: 100vh; padding: 0 20px 1em; display: block; visibility: visible; opacity: 1;}

.posts h2, .faq h2{ font-size: 36px;}
.posts .posts-intro .container, .faq .container{ align-items: flex-start; justify-content: space-between;}
.posts .posts-intro .posts-headline, .faq .faq-intro .faq-headlines{ width: 75%;}
.posts .post-grid{ margin-top: 30px; position: relative; z-index: 2;}
.posts .post-grid .single-post{ box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.15); border-radius: 30px; background-color: #fff; margin-bottom: 15px;}
.posts .post-grid .post-visual{ background-color: #ccc; background-size: cover; background-position: center center; position: relative; border-top-left-radius: 30px; border-top-right-radius: 30px;}
.posts .post-grid .post-visual:after{ content: ""; padding-bottom: 56.25%; display: block;}
.posts .post-grid .post-visual a{ position: absolute; top: 0; left: 0; width: 100%;}
.posts .post-grid .post-content{ padding: 25px 40px; font-size: 14px; line-height: 21px;}
.posts .post-grid .post-content h3{ font-size: 16px;}
.posts .post-grid .post-content h3 a{ text-decoration: none; color: #231F20;}
.posts .post-grid .post-content .more{ font-size: 16px; letter-spacing: .05em; text-decoration: none; text-transform: uppercase; color: #F1BE66; display: inline-block; margin-top: 15px;}
.posts .post-grid .post-content .more:hover{ color: #231F20;}

.post-grid .slick-slide{ margin: 0 10px;}
.post-grid .slick-list{ margin: 0 -10px;}
.slick-dots{ margin: 0 !important;}

.faq{ background-image: url(images/faq.jpg); background-size: 75%; padding: 100px 0;}
.faq .tabs{ margin-top: 30px;}
.faq .tab{ background-color: #fff; border-radius: 30px; margin-bottom: 20px; box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.15);}

.slick-dots li button{ border: 3px solid #F1BE66 !important; border-radius: 100px; background-color: #fff !important;}
.slick-dots li.slick-active button{ background-color: #F1BE66 !important;}
.slick-dots li button::before{ display: none;}


/* Homepage */

.home .hero{ height: 550px; background-image: url(images/home-hero.png); background-position: right top; background-size: contain; background-repeat: no-repeat; display: flex; align-items: center;}
.home .hero .wrapper{ max-width: 960px;}
.home .hero .hero-content{ width: 460px;}
.home .hero h1{ font-size: 42px; line-height: 42px; letter-spacing: .05em; width: 460px; font-family: "GabrielSansCondensed", Helvetica, Arial, sans-serif;}
.home .hero h1 span{ color: #F1BE66;}
.home .hero p{ width: 350px; text-align: right; float: right;}
.home .hero .buttons{ clear: both; float: right; margin: 15px 0 0; list-style: none;}
.home .hero .buttons li{ display: inline-block; margin-left: 15px;}
.home .hero .buttons li:nth-of-type(1) .button{ color: #F1BE66; border: 1px solid #F1BE66;}
.home .hero .buttons li:nth-of-type(1) .button:hover{ color: #231F20; border: 1px solid #231F20;}

.home .intro{ margin-bottom: 225px; position: relative;}
.home .intro .intro-content{ background-color: #FFF0CA; padding: 120px 130px 150px 15%; box-sizing: border-box; border-top-left-radius: 100px; border-bottom-left-radius: 100px; position: absolute; top: 0; right: 0; width: 65%;}
.home .intro .intro-visual{ display: flex; position: relative; z-index: 2; padding-top: 80px;}
.home .intro .intro-visual img{ max-width: 250px;}
.home .intro .intro-visual img:nth-of-type(1){ margin-right: 20px;}
.home .intro .intro-logos{ margin: 30px 0 0;list-style: none; display: flex; align-items: center; justify-content: flex-start;}
.home .intro .intro-logos img{ max-width: 200px; max-height: 125px; margin-right: 30px;}


.home .phases h2{ font-size: 36px;}
.home .phases .phases-intro{ margin-bottom: 60px;}
.home .phases .phases-intro .container{ align-items: flex-start; justify-content: space-between;}
.home .phases .phases-intro .phases-headlines{ width: 60%;}

.home .phases .phases-container { display: flex; align-items: center; min-height: 400px; }
.home .phases .phases-content { flex: 4; background-size: cover; background-position: center; position: relative; padding: 125px 20px 125px 0; height: 600px; transition: background-image 0.5s ease; }
.home .phases .phases-content::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); z-index: 1; }
.home .phases .phases-content-inner { position: relative; z-index: 2; max-width: 80%; margin-left: 0; height: 100%; overflow: auto; }
.home .phases .phases-tabs { display: flex; flex-direction: column; gap: 20px; }
.home .phases .phase-item { display: flex; flex-direction: column; padding: 0 100px; }
.home .phases .phase-item.active { background: #FFF0CA; padding: 50px 100px; border-radius: 0 100px 100px 0; }
.home .phases .tab-headline { display: flex; align-items: center; gap: 10px; cursor: pointer; color: #fff; font-size: 21px; font-weight: normal; padding: 10px 0; transition: color 0.3s ease; padding: 30px 0; }
.home .phases .phases-tabs .phase-item:nth-of-type(2) .tab-headline { border-top: 1px solid #FFF0CA; border-bottom: 1px solid #FFF0CA; }
.home .phases .phases-tabs .phase-item:first-child.active ~ .phase-item:nth-of-type(2) .tab-headline { border-top: none; }
.home .phases .phases-tabs .phase-item:nth-of-type(2) .tab-headline { border-top: none; border-bottom: none; }
.home .phases .phases-tabs .phase-item:nth-of-type(2):not(.active) .tab-headline { border-top: 1px solid #FFF0CA; border-bottom: 1px solid #FFF0CA; }
.home .phases .phases-tabs .phase-item:first-child.active ~ .phase-item:nth-of-type(2):not(.active) .tab-headline { border-top: none; }
.home .phases .phases-tabs .phase-item:last-child.active ~ .phase-item:nth-of-type(2):not(.active) .tab-headline { border-bottom: none; }
.home .phases .phases-tabs .phase-item:nth-of-type(2):not(.active):has(~ .phase-item:last-child.active) .tab-headline { border-bottom: none; }
.home .phases .phase-item.active .tab-headline { color: #333; padding: 0; }
.home .phases .tab-headline.active { color: #D4A017; font-weight: bold; }
.home .phases .phase-item.active .tab-icon { display: none; }
.home .phases .tab-icon { display: inline-block; margin-right: 20px; }
.home .phases .tab-icon img { max-width: 35px; margin-top: 5px; }
.home .phases .tab-icon svg { vertical-align: middle; }
.home .phases .single-phase { display: none; margin-top: 10px; opacity: 0; transition: opacity 0.5s ease; }
.home .phases .single-phase.active { display: block; opacity: 1; }
.home .phases .single-phase-content p { color: #333; line-height: 1.6; margin: 0 0 20px; }
.home .phases .phase-btn { display: inline-flex; align-items: center; color: #333; text-decoration: none; font-weight: bold; float: right;}
.home .phases .phase-btn::after { content: ""; height: 40px; width: 40px; background-image: url(images/bee-icon.png); background-size: 80px; background-position: left center; margin-left: 15px;}
.home .phases .phase-btn:hover{ letter-spacing: .05em;}
.home .phases .phase-btn:hover::after{ background-position: right center; }
.home .phases .phases-visual { flex: 1; display: flex; align-items: center; justify-content: center; background: #fff; padding: 0 0 0 20px; align-self: center; }
.home .phases .phase-image { display: none; max-width: 100%; height: auto; opacity: 0; transition: opacity 0.3s ease; }
.home .phases .phase-image.active { display: block; opacity: 1; }


.home .posts{ margin-top: 100px;}

.home .faq{ padding-top: 200px; margin-top: -100px;}
.home .faq .tab{ width: 50%;}


/* Solutions */

.solutions:after{ content: ""; display: block; clear: both;}
.solutions .hero{ background-image: url(images/solutions-hero.png); background-position: bottom right; background-repeat: no-repeat; background-size: 25%;}
.solutions .hero .hero-content{ width: 65%; padding: 100px 0 200px;}
.solutions .hero h1{ font-family: "GabrielSansCondensed", Helvetica, Arial, sans-serif; margin-bottom: 25px;}
.solutions .hero h1 span{ display: block; color: #F1BE66;}
.solutions .hero .button{ margin-top: 30px;}

.solutions .callouts{ background-image: url(images/solutions-callouts.jpg); background-size: 25%; background-position: bottom -20px left; background-repeat: no-repeat;}
.solutions .callouts .single-callout{ float: right; width: 75%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px;}
.solutions .callouts .single-callout:nth-of-type(even){ flex-direction: row-reverse;}
.solutions .callouts .single-callout:after{ clear: both;}
.solutions .callouts .single-callout .callout-content{ width: 65%; font-size: 16px; line-height: 28px;}
.solutions .callouts .single-callout .callout-visual{ width: 30%;}
.solutions .callouts .single-callout h2{ font-size: 24px;}

.solutions .solutions-container, .careers .positions-container{ margin: 60px 0 100px; width: 95%; float: right;}
.solutions .solutions-container h2, .careers .positions-container h2{ font-size: 36px; margin: 0 0 15px 60px;}
.solutions .solutions-container h3, .careers .single-position h3{ font-size: 24px; width: 30%;}
.solutions .solutions-container .single-solution, .careers .single-position{ display: flex; align-items: center; justify-content: space-between; padding: 30px 45px 30px 60px; border-top-left-radius: 100px; border-bottom-left-radius: 100px;}
.solutions .single-solution:hover, .careers .single-position:hover{ background-color: #FFFBF2;}
.solutions .single-solution .solution-content, .solutions .single-solution .solution-button, .careers .single-position h3, .careers .single-position .position-content, .careers .single-position .position-button{ width: 30%;}
.solutions .solutions-container .single-solution .solution-button, .careers .single-position .position-button{ text-align: right;}
.solutions .solutions-container .single-solution .solution-button .more, .careers .single-position .more{ font-size: 16px; text-decoration: none; display: inline-block; margin-top: 15px; text-decoration: none; color: #231F20; display: flex; align-items: center; justify-content: flex-end; padding-right: 25px; margin: 0;}
.solutions .solutions-container .single-solution .solution-button .more:after, .careers .single-position .more:after{ content: ""; width: 35px; height: 35px; background-image: url(images/bee-icon.png); display: block; background-position: left center; background-repeat: no-repeat; background-size: cover; margin-left: 10px;}
.solutions .solutions-container .single-solution .solution-button .more:hover, .careers .single-position .more:hover{ letter-spacing: .05em;}
.solutions .solutions-container .single-solution .solution-button .more:hover:after, .careers .single-position .more:hover:after{ background-position: right center;}


/* Single Solution */

.solution .hero-content{ margin: 60px 0 100px;}
.solution .hero-content h1{ font-family: "GabrielSansCondensed", Helvetica, Arial, sans-serif; font-size: 60px; line-height: 60px;}
.solution .hero-content h1 span{ display: block; color: #F1BE66;}
.solution .hero-content p{ width: 60%; margin-top: 20px;}

.solution .services{ background-image: url(images/faq.jpg); background-size: 120%; padding: 40px 0 100px;}
.solution .services .services-grid{ display: grid; grid-template-columns: repeat(2,1fr); gap: 100px;}
.solution .services h2{ font-size: 36px; color: #F1BE66; margin-bottom: 30px; margin-top: 60px;}
.solution .services h3{ font-size: 21px; margin-top: 30px;}
.solution .services p{ margin-top: 20px;}
.solution .services h3 + p{ margin-top: 10px;}
.maintaining .services img{ max-width: 350px;}
.maintaining .services img:nth-last-of-type(1){ margin-top: 60px;}
.maintaining .services .cta{ display: flex; justify-content: space-between; align-items: center;}
.maintaining .services .cta img{ max-width: 250px;}
.maintaining .services .cta .cta-content{ width: calc(100% - 300px); font-size: 18px; line-height: 26px;}
.maintaining .services .cta a{ color: #231F20; text-decoration: none;}
.maintaining .services .cta a:nth-of-type(1):before{ content: ""; display: block; width: 80px; height: 2px; background-color: #F1BE66; margin: 0 0 20px;}

.starting .services .column:nth-of-type(2){ margin-top: 125px;}

.selling .services img:nth-last-of-type(1){ margin-top: 20px;}
.selling .hero-content{ background-image: url(images/kdt.png); background-position: center right; background-repeat: no-repeat; background-size: 300px;}

.solution .posts{ margin: 100px 0;}


/* FAQ Archive */

.post-type-archive-faq .faq-intro{ display: flex; justify-content: space-between; align-items: flex-start;}
.post-type-archive-faq .tab, .post-type-archive-faq .faq .faq-intro{ width: 80%;}


/* Careers */

.careers .hero{ position: relative; overflow-x: hidden;}
.careers .hero .hero-content{ background-color: #FFF0CA; width: 55%; box-sizing: border-box; padding: 60px 12% 100px 7.5%; border-top-right-radius: 100px; border-bottom-right-radius: 100px; position: relative; z-index: 2;}
.careers .hero:after{ content: ""; width: 100%; height: 500px; display: block; position: absolute; right: 0; top: 0; background-color: #F1BD67;}
.careers .hero:before{ content: ""; width: 550px; height: 500px; display: block; position: absolute; left: 55%; top: 0; background-image: url(images/careers-hero.jpg); background-size: cover;  background-position: center center; background-repeat: no-repeat; z-index: 1;}
.careers .hero h1{ font-family: "GabrielSansCondensed", Helvetica, Arial, sans-serif; font-size: 60px; line-height: 64px;}
.careers .hero h1 span{ display: block; color: #F1BE66;}
.careers .hero p{ margin: 30px 0 45px;}

.careers .culture{ margin: 100px 0;}
.careers .culture .container{ align-items: center; justify-content: space-between;}
.careers .culture .culture-visual{ width: 56%; margin-left: -8%;}
.careers .culture .culture-content{ width: 48%;}
.careers .culture .culture-content h2{ font-size: 24px; margin-top: 45px;}
.careers .culture .culture-content p{ margin-top: 5px;}

.careers .testimonial{ margin-bottom: 200px;}
.careers .testimonial .quote{ background-color: #231F20; color: #fff; position: relative; border-radius: 100px; padding: 70px 100px; font-size: 21px; line-height: 31px;}
.careers .testimonial .quote .testimonial-source{ font-size: 18px; margin-top: 30px;}
.careers .testimonial .quote .testimonial-source:before{ content: "— ";}
.careers .testimonial .quote .quote-container{ width: 60%;}
.careers .testimonial img{ width: 23%; max-width: 300px;position: absolute; top: 60px; right: 100px;}

.careers .positions-container .positions-intro p{ margin: 0 0 60px 60px;}

.careers .cta{ clear: both; border-radius: 100px; width: 90%; max-width: 1200px; padding: 45px 100px; box-sizing: border-box; background-image: url(images/cta-bkg.jpg); background-size: 70%; margin: 0 auto 100px;}
.careers .cta h2{ font-size: 36px; margin: 0 0 10px;}
.careers .cta p{ margin: 0 0 45px;}
.careers .cta .gform_body input, .careers .cta .gform_body textarea{ background: none; border: none; border-bottom: 2px solid #231F20; color: #231F20; opacity: 1; padding: 0 0 5px 0 !important;}
.careers #field_2_3{ margin-top: -140px;}
.careers #field_2_4{ margin-top: -110px;}
.careers #field_2_5{ margin-top: -80px;}
.careers #field_2_6{ background-color: #231F20; color: #fff; border-radius: 60px; padding: 30px !important; text-align: center;}
.careers #field_2_6 input{ border: none; width: 80px; margin: 15px auto 0;}
.careers #gfield_upload_rules_2_6{ margin-top: 0;}
.careers .cta .gform_footer{ justify-content: flex-end;}
.careers .cta .gform_button{ background: none;}
.careers .cta .gform_button:hover{ background-color: #231F20; color: #fff;}
.page-template-careers .footer{ clear: both;}


/* About */

.about{ overflow-x: hidden;}

.about .hero{ margin: 75px 0 115px;}
.about .hero .container{ align-items: center; justify-content: space-between; background-image: url(images/about-hero-bee.png); background-position: left bottom; background-size: 25%; background-repeat: no-repeat;}
.about .hero img{ width: 80%;}
.about .hero h1{ width: 15%; text-align: right;}

.about .intro{ display: flex; justify-content: space-between; position: relative; margin-bottom: 230px;}
.about .intro .intro-content{ background-color: #231F20; color: #fff; border-top-right-radius: 100px; border-bottom-right-radius: 100px; padding: 150px 15% 125px 5%; box-sizing: border-box; font-size: 16px; line-height: 26px; width: 55%;}
.about .intro h2{ font-size: 42px;}
.about .intro .intro-visual{ position: absolute; top: 0; right: 0; width: 50%; display: flex; align-items: flex-start; justify-content: space-between; margin: 150px 0 0 -5%;}
.about .intro .intro-visual img{ width: calc(50% - 10px); height: auto;}
.about .intro .intro-visual img:nth-of-type(1){ margin-top: 50px;}

.about .bee{ background-color: rgba(255,240,202,.25); padding: 150px 0 100px; background-image: url(images/beekeeper.png); background-position: top right; background-size: contain; background-repeat: no-repeat;}
.about .bee .bee-content{ width: 70%;}
.about .bee .container{ justify-content: space-between;}
.about .bee .column:nth-of-type(1){ width: 300px;}
.about .bee .column:nth-of-type(2){ width: calc(100% - 360px);}
.about .bee h2{ font-size: 36px; margin-top: 10px;}
.about .bee:after{ content: ""; width:; height:; position: absolute; bottom:; left:; background-image: url(images/about-bee-1.png);}
.about .bee:before{ content: ""; width:; height:; position: absolute; top:; right:; background-image: url(images/about-bee-2.png);}

.about .team{ margin: 150px 0 600px; position: relative;}
.about .team .team-intro{ width: 60%; margin-bottom: 60px; }
.about .team .team-intro h2{ font-size: 36px; }
.about .team .team-visual{ background-size: cover; background-position: top center; filter: grayscale(1); }
.about .team .team-visual:after{ content: ""; padding-bottom: 110%; display: block; }
.about .team .slick-current .team-visual{ filter: grayscale(0); }
.about .team .team-container { position: relative; }
.about .team .team-carousel .slick-slide { margin: 0 10px; }
.about .team .team-carousel { margin: 0 -10px; }
.about .team .team-member { cursor: pointer; position: relative; }
.about .team .team-content{ display: none !important;}
.about .team .active-content{ display: flex !important; justify-content: space-between; position: absolute; width: 65vw; left: 45%; transform: translateX(-50%); top: 100%; margin-top: 60px; z-index: 10;}
.about .team, .about .team .team-container, .about .team .team-carousel, .about .team .team-member { overflow: visible !important;}
.about .team .team-bio{ width: 65%; line-height: 26px;}
.about .team .team-contact{ width: 30%; text-align: right;}
.about .team .team-contact span{ display: block;}
.about .team .team-contact a{ color: #231F20; text-decoration: none;}
.about .team h3{ font-size: 24px;}
.about .team .team-title{ margin-top: 0;}

.about .cta{ margin-bottom: 250px; padding-left: 150px;}
.about .cta .cta-container{ background-color: #F1BE66; color: #fff; position: relative; border-radius: 100px; padding: 70px 100px; font-size: 21px; line-height: 31px; width: calc(100% - 300px); margin: 0 auto;}
.about .cta .cta-content{ width: 60%; margin-left: 25%;}
.about .cta img{ width: 33%; position: absolute; top: 60px; left: -100px;}
.about .cta h2{ font-size: 36px;}
.about .cta .button{ margin-top: 30px; color: #fff; border: 1px solid #fff;}
.about .cta .button:hover{ color: #231F20; border: 1px solid #231F20;}


/* Blog */

.blog .content{ margin: 245px 0 100px;}
.blog .content h1{ margin-bottom: 30px;}
.single .hero .hero-container{ display: flex; align-items: center; justify-content: space-between;}
.single .hero-visual{ background-size: cover; background-position: center center; width: 50%;}
.single .hero-visual:after{ content: ""; padding-bottom: 56.25%; display: block;}
.single .hero-content{ width: 50%; padding: 0 5%; box-sizing: border-box;}
.single .hero-content h1{ font-family: "GabrielSansCondensed", Helvetica, Arial, sans-serif; font-size: 36px; line-height: 50px;}
.single .hero-content h1 span{ color: #F1BE66; display: block; font-size: 42px; line-height: 55px;}
.single .entry-content{ padding: 100px 0;}
.single .entry-content h2, .single .entry-content h3, .single .entry-content h4, .single .entry-content h5, .single .entry-content h6{ margin-top: 25px;}
.single .entry-content .container{ justify-content: space-between;}
.single .entry-content .column{ width: 46%;}
.single .entry-content.one-col{ width: 75%;}


/* Resources */

.resources{ overflow-x: hidden;}
.resources .hero{ position: relative; margin-bottom: 150px; display: flex; justify-content: flex-end;}
.resources .hero .hero-content{ background-color: #FFF0CA; width: 55%; box-sizing: border-box; padding: 100px 12% 100px 7.5%; border-top-left-radius: 100px; border-bottom-left-radius: 100px; position: relative; z-index: 2;}
.resources .hero:after{ content: ""; width: 100%; height: 425px; display: block; position: absolute; right: 0; top: 0; background-color: #F1BD67;}
.resources .hero:before{ content: ""; width: 550px; height: 425px; display: block; position: absolute; left: 0; top: 0; background-image: url(images/resources-hero.jpg); background-size: cover;  background-position: center center; background-repeat: no-repeat; z-index: 1;}
.resources .hero h1{ font-family: "GabrielSansCondensed", Helvetica, Arial, sans-serif; font-size: 60px; line-height: 64px;}
.resources .hero h1 span{ display: block; color: #F1BE66;}
.resources .hero p{ margin: 30px 0 45px;}

.resources .posts{ margin-bottom: 100px;}
.resources .resources-grid{ margin-top: 30px; display: grid; grid-template-columns: repeat(3,1fr); column-gap: 20px; row-gap: 80px; position: relative; z-index: 2;}
.resources .resources-grid .single-resource{ box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.15); border-radius: 30px; background-color: #fff;}
.resources .post-visual{ background-color: #ccc; background-size: cover; background-position: center center; position: relative; border-top-left-radius: 30px; border-top-right-radius: 30px;}
.resources .post-visual:after{ content: ""; padding-bottom: 56.25%; display: block;}
.resources .post-visual a{ position: absolute; top: 0; left: 0; width: 100%;}
.resources .post-content{ padding: 15px 25px; font-size: 14px; line-height: 21px;}
.resources .post-content h3, .resources .posts h3{ font-size: 16px;}
.resources .post-content h3 a{ text-decoration: none; color: #231F20;}
.resources .posts .more{ font-size: 16px; letter-spacing: .05em; text-decoration: none; text-transform: uppercase; color: #F1BE66; display: inline-block; margin-top: 15px;}
.resources .posts .more:hover{ color: #231F20;}
.resources .links .resource-content, .resources .downloads .single-post{ padding: 25px 40px;}
.resources .links .resource-content ul{ list-style: none; margin: 15px 0 0; columns: 2;}
.resources .links .resource-content ul li{ margin: 0 0 5px;}
.resources .links .resource-content ul li .more{ margin: 0;}

.resources .calendar{ margin-bottom: 100px;}
.resources .calendar h2{ font-size: 36px;}

.resources .faq .tabs{ width: 65%;}



/* Media queries */

@media (max-width: 1060px) {
	.header .nav{ display: none;}
	.header .logo{ margin: 0;}
	.home{ overflow-x: hidden;}
	.home .hero .hero-content{ width: 50%;}
	.home .hero h1{ width: 100%; font-size: 36px; line-height: 36px;}
	.home .hero p{ float: none; text-align: left;}
	.home .hero .buttons{ float: none;}
	.home .hero .buttons li{ margin: 0 0 15px 0; display: block;}
	.home .intro{ margin-bottom: 350px;}
	.home .intro .intro-content{ width: 85%;}
	.home .intro .intro-visual img:nth-of-type(1){ display: none;}
	.home .phases h2, .posts h2, .faq h2{ font-size: 30px;}
	.home .phases .phases-visual{ display: none;}
	.home .faq .tab, .resources .faq .tabs{ width: 100%;}
	.faq-intro{ width: 70%;}
	.footer .container{ flex-direction: column; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center;}
	.footer img{ order: 1;}
	.footer .column:nth-of-type(1):before{ display: none;}
	.footer .column:nth-of-type(1){ width: 200px; order: 2; margin: 30px 0;}
	.footer .column:nth-of-type(2){ justify-content: center; order: 3;}
	.footer .sub-footer::before{ display: none;}
	.sub-footer{ margin-top: 30px;}
	
}

@media (max-width: 900px) {
	.home .hero{ background-position: right -225% top;}
	.home .intro .intro-visual{ padding-top: 30%;}
	.home .intro .intro-visual img{ max-width: 150px;}
	.home .intro .intro-content{ padding: 60px 30px 60px 150px; padding-bottom: 60px;}
	.home .intro .intro-logos{ flex-direction: column;}
	.home .phases .phases-content{ height: 650px;}
	.home .phases .phases-content-inner{ max-width: 100%;}
	.home .phases .phase-item.active{ padding: 50px;}
	.home .phases .phase-item{ padding: 0 50px;}
	.posts .posts-intro .posts-headline, .faq-intro, .home .phases .phases-intro .phases-headlines{ width: 100%; margin-bottom: 30px;}
	.posts .posts-intro .container, .faq .container, .home .phases .phases-intro .container{ flex-direction: column;}
	.about .hero img{ width: 100%;}
	.about .hero .container{ flex-direction: column-reverse; background-position: bottom -30px right 50%; padding-bottom: 60px;}
	.about .hero h1{ width: 100%; text-align: right; margin-top: 30px;}
	.about .intro .intro-visual{ flex-direction: column; align-items: flex-end; margin-top: 30px;}
	.about .intro .intro-visual img:nth-of-type(1){ margin-top: 0;}
	.about .intro .intro-visual img:nth-of-type(2){ margin: 30px 30px 0 0;}
	.about .intro .intro-content{ width: 75%; padding: 60px 15% 60px 5%;}
	.about .intro h2{ font-size: 36px;}
	.about .bee{ padding: 60px 0;}
	.about .bee .bee-content, .about .bee .container, .about .bee .column:nth-of-type(1), .about .bee .column:nth-of-type(2){ display: block; width: 100%;}
	.about .team .team-intro{ width: 100%;}
	.about .team .active-content{ width: 100%; left: 5%; right: 5%; flex-direction: column; transform: none;}
	.about .team .team-contact{ width: 100%; text-align: left;}
	.about .team .team-bio{ width: 90%;}
	.solutions .hero .hero-content{ width: 100%; padding-bottom: 300px;}
	.solutions .hero{ background-position: bottom right 10%; background-size: 33%;}
	.solutions .callouts .single-callout{ width: 100%;}
	.solutions .solutions-container .single-solution, .careers .single-position{ flex-direction: column;}
	.solutions .solutions-container h3, .careers .single-position h3, .solutions .single-solution .solution-content, .solutions .single-solution .solution-button, .careers .single-position h3, .careers .single-position .position-content, .careers .single-position .position-button{ width: 100%;}
	.solutions .single-solution, .careers .single-position{ background-color: #FFFBF2;}
	.solutions .callouts{ background-position: bottom -100px right; padding-bottom: 100px; background-size: 50%;}
	.solution .hero-content p{ width: 100%;}
	.solution .services .services-grid{ grid-template-columns: repeat(1,1fr); gap: 30px;}
	.starting .services .column:nth-of-type(2){ margin-top: 0;}
	.solution .hero-content h1, .careers .hero h1, .resources .hero h1{ font-size: 36px; line-height: 36px;}
	.maintaining .services .cta{ flex-direction: column;}
	.maintaining .services .cta .cta-content{ width: 100%;}
	.selling .hero-content{ padding-bottom: 200px; background-position: left bottom;}
	.careers .hero .hero-content{ width: 75%;}
	.careers .culture .container{ flex-direction: column;}
	.careers .culture .culture-content, .careers .culture .culture-visual{ width: 100%;}
	.careers .testimonial .quote{ padding: 60px;}
	.careers .testimonial .quote .quote-container{ width: 100%;}
	.careers .testimonial img{ position: relative; right: 0; top: 0; margin-top: 60px; width: 50%; margin-bottom: -150px;}
	.careers .hero::before{ width: 100%; background-position: bottom left 400px; left: 0;}
	.entry-content.two-col .container{ flex-direction: column;}
	.entry-content.two-col .column{ width: 100%; margin-bottom: 30px;}
	.resources .hero{ margin-bottom: 100px;}
	.resources .hero h1 span{ display: inline;}
	.resources .hero .hero-content{ width: 65%; padding: 100px 7.5%;}
	.post-type-archive-faq .faq-intro{ display: block;}
	.post-type-archive-faq .tab, .post-type-archive-faq .faq .faq-intro, .posts .posts-intro .posts-headline, .faq .faq-intro .faq-headlines{ width: 100%;}
	.posts .posts-intro .posts-headline, .faq .faq-intro .faq-headlines{ margin-bottom: 30px;}
	.about .intro{ margin-bottom: 100px;}
	.solutions .solutions-container .single-solution .solution-button .more, .careers .single-position .more{ margin-top: 15px;}
}

@media (max-width: 768px) {
	.home .hero{ background: none; height: auto; padding: 100px 0;}
	.home .hero .hero-content{ width: 100%;}
	.home .intro{ margin-bottom: 600px;}
	.about .team{ margin-bottom: 650px;}
	.about .cta{ padding-left: 0;}
	.about .cta .cta-container{ width: 100%; display: flex; flex-direction: column-reverse; padding: 70px;}
	.about .cta img{ position: relative; top: 0; left: 0; margin-top: 45px; width: 100%; margin-bottom: -150px;}
	.about .cta .cta-content{ width: 100%; margin-left: 0;}
	.solutions .callouts .single-callout{ flex-direction: column !important;}
	.solutions .callouts .single-callout .callout-content, .solutions .callouts .single-callout .callout-visual{ width: 100%;}
	.solutions .callouts .single-callout .callout-visual{ margin-bottom: 30px;}
	.solutions .callouts{ padding-bottom: 300px;}
	.careers .hero::before{ width: 100%; background-position: bottom left 300px; left: 0;}
	.home .intro{ margin-bottom: 60px;}
	.home .intro .wrapper{ display: flex; flex-direction: column-reverse; max-width: 100%; width: 100%;}
	.home .intro .intro-content{ position: relative; width: 90%; margin-left: 10%; padding: 60px 45px;}
	.home .intro .intro-visual{ padding-top: 30px;}
	.home .intro .intro-visual img{ width: 80%; margin: 0 10%; max-width: 100%;}
}

@media (max-width: 500px) {
	.about .intro .intro-visual{ position: relative;}
	.about .intro{ flex-direction: column;}
	.about .intro .intro-content, .about .intro .intro-visual{ width: 90%;}
	.about .intro .intro-visual{ align-items: flex-start;}
	.about .intro .intro-visual img:nth-of-type(1){ margin-left: 50px;}
	.about .intro .intro-visual img:nth-of-type(2){ margin: 10px 0 0 100px;}
	.about .hero{ margin-bottom: 60px;}
	.solutions .callouts{ padding-bottom: 200px;}
}









