/*
Theme Name: Wagner
Theme URI: http://digitalriver.com
Author: Digital River
Author URI: http://digitalriver.com
Description: Custom theme by Digital River
Version: 1.0.0
License: GNU General Public License
License URI: license.txt
Text Domain: wagner

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


#step3 .table-desktop { padding: 0 84px; }
#step3 .row { background: #fff; }

.compare-table tbody td { border: 1px solid #000; vertical-align: middle !important; padding: 15px 19px !important; }
.compare-table tbody td i.check:after { content: ''; display: block; width: 33px; height: 33px; margin: 0 auto; background: url("/wp-content/themes/wagner-spray-tech/img/Icon.svg") }
.compare-table tbody tr:first-child td { border-top: 5px solid #FFCB00; }
.compare-table tbody tr.compare-title { background: #CCC; border:0 }
.compare-table tbody tr.compare-title td:first-child { border-right-color: #CCC; }
.compare-table thead td img { max-width: 100%; display: block; padding: 10px; margin: 0 auto;}
.compare-table thead td,
.compare-table tfoot th { padding: 19px 5px !important; }
.compare-table tbody td hr { max-width: 49px; border-top: 1px solid #000; margin: auto; }
.compare-table td img { display: block; max-width: 100%; height: auto; }
.compare-table td.image-cell { padding: 0 !important; }
.compare-table tbody td h5 { font-weight: normal !important; }

.table-mobile .compare-table { display: none; }
.table-mobile .compare-table tbody td { height: 70px; }
.table-mobile .compare-table tbody td i.check:after { content: ''; display: block; width: 22px; height: 22px; margin: 0 auto; background: url("/wp-content/themes/wagner-spray-tech/img/Icon.svg"); background-size: cover; background-position: center; background-repeat: no-repeat; }
.table-mobile .compare-table thead td img { max-width: 69px; height: auto; }
.table-mobile .compare-table thead td h4 { font-size: 16px; }
.table-mobile .compare-table tbody td h5 { font-size: 16px; text-transform: none; font-weight: normal; }
.table-mobile .compare-table tbody td p { font-size: 13px; }
.table-mobile .compare-table tfoot th .btn { white-space: normal; padding: 6px 10px; }

#sprayer_selector { border:none; margin: 0 -30px 0; }
#sprayer_selector .panel { border:none; margin: 0 0px 0; }
#sprayer_selector .panel .panel-heading { position: relative; padding: 33px 0; border: none !important; }
#sprayer_selector .panel .panel-heading .button { position: absolute; height: 100%; top: 0; background: #000; padding: 0 52px; text-align: left; }
#sprayer_selector .panel .panel-heading .button a { font-size: 3.6rem; font-weight: bold; color: #575757; display: inline-block; margin-top: 10px }
#sprayer_selector .panel .panel-heading .button a:hover { text-decoration: none; }
#sprayer_selector .panel .panel-heading .button:before { margin-bottom: 16px; content: ''; width: 28px; height: 29px; background-image: url( './img/Path-gray.svg' ); display: inline-block; margin-right: 18px; }
#sprayer_selector .panel h4 { text-transform: none; font-size: 20px; }
#sprayer_selector .panel .row { padding: 33px 0; }
#sprayer_selector .panel .shell { max-width: 900px; margin: 0 auto; }
#sprayer_selector .panel .panel-content .shell { max-width: 534px; margin: 0 auto; }
#sprayer_selector .panel .cols { display: flex }
#sprayer_selector .panel .col-1of2 { width: 46%; }

#sprayer_selector .panel .panel-body { background: #e2e2e2; display: flex; align-items: stretch; padding: 0; }
#sprayer_selector .panel .panel-content { width: 68%; }
#sprayer_selector .panel .panel-aside { position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: 32%; height: 468px; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; }

.panel-aside .panel-triangle,
.panel-heading .panel-triangle { position: absolute; top: 0; bottom: 0; right: 80%; width: 300px; transform: skew(-18deg); background: rgb(128,173,190); background: #e2e2e2; }
.panel-heading .panel-triangle { display: none; background: #ffcb05; }
.panel-triangle--right { right: unset; left: 80%; transform: skew(18deg) !important; }

#sprayer_selector .panel .panel-aside .btn-trapezoid { width: 100%; height: 76px; padding: 0 34px;  line-height: 2; text-transform: uppercase; background: #000; color: #fff !important; font-size: 36px; font-weight: 600; border: none; border-radius: 0; text-decoration: none; margin: 0 !important; }
#sprayer_selector .panel .panel-aside .prev:focus { background: #000; }
#sprayer_selector .panel .panel-aside .btn-trapezoid:hover { text-decoration: none; }
#sprayer_selector .panel .panel-aside .btn-trapezoid.btn-trapezoid--left { right: 0; text-align: right; }
#sprayer_selector .panel .panel-aside .btn-trapezoid.btn-trapezoid--left:after { content: ''; width: 28px; height: 29px; background-image: url( './img/Path.svg' ); display: inline-block; transform: rotate(180deg); margin-left: 18px; }
#sprayer_selector .panel .panel-aside .btn-trapezoid.btn-trapezoid--right { left: 0; text-align: left; }
#sprayer_selector .panel .panel-aside .btn-trapezoid.btn-trapezoid--right:before { content: ''; width: 28px; height: 29px; background-image: url( './img/Path.svg' ); display: inline-block; margin-right: 18px; }

#sprayer_selector .panel#step2 .panel-heading { text-align: right; }
#sprayer_selector .panel#step2 .panel-heading h2 { text-align: right; padding-right: 110px; }
#sprayer_selector .panel#step2 .panel-content { padding-left: 30px; }

#sprayer_selector .panel#step3 .panel-heading { text-align: center; }

#sprayer_selector .radio-options { padding-top: 15px; }
#sprayer_selector .radio { margin-bottom: 19px; }
#sprayer_selector .radio label { display: block; position: relative; padding-left: 26px; margin-bottom: 13px; cursor: pointer; font-size: 20px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
#sprayer_selector .radio input { position: absolute; opacity: 0; cursor: pointer; }
#sprayer_selector .radio .checkmark { position: absolute; top: 15%; left: 0; height: 15px; width: 15px; border-radius: 100%; border: 2px solid #000; }
#sprayer_selector .radio label:hover input ~ .checkmark { background-color: #ccc; }
#sprayer_selector .radio label input:checked ~ .checkmark { background-color: #000; }
#sprayer_selector .radio .checkmark:after { content: ""; position: absolute; display: none; }
#sprayer_selector .radio label input:checked ~ .checkmark:after { display: block; }

#sprayer_selector .slick-arrow { display: none !important; }
#sprayer_selector *:focus { outline-width: 0 !important; }

#sprayer_selector .step-1-substep-2.inactive,
#sprayer_selector .step-2-substep-2.inactive { opacity: .3 }

#sprayer_selector .step-1-substep-2.inactive input[type="radio"] { pointer-events: none; }

.slick-track { display: flex !important; }

.slick-slide { height: inherit !important; }
#sprayer_selector .panel#step3 .button-mobile { display: none; }


@media( max-width: 1229px ) {
  .panel-triangle { right: 75% !important; }
  .panel-triangle--right { left: 75% !important; }
}

@media( max-width: 991px ) {
  #sprayer_selector .panel .row { margin: 0 !important; }
  #sprayer_selector .panel .shell { padding: 0 20px; }
  .panel-triangle { right: 67% !important; }
  .panel-triangle--right { left: 67% !important; }
}


@media( max-width: 769px ) {
  .table-desktop .compare-table { display: none; }
  .table-mobile .compare-table { display: table; }
}


@media( max-width: 767.5px ) {

  #sprayer_selector .panel .shell { padding: 0; }
  .panel-heading .panel-triangle { display: block; background: #ffcb05; }
  #sprayer_selector .panel .panel-aside { display: none; }
  #sprayer_selector .panel .cols { display: block; }
  #sprayer_selector .panel .col-1of2 { width: 100%; }
  #sprayer_selector .panel .panel-content { width: 100%; }
  #sprayer_selector .panel .row { padding: 10px 60px; margin: 0 !important; }

  #sprayer_selector .panel .panel-heading { padding: 0; }
  #sprayer_selector .panel .panel-heading h2 { padding: 0; width: 70%; padding: 0 18px; font-size: 28px; }
  #sprayer_selector .panel .panel-heading .shell { display: flex; align-items: center; }
  #sprayer_selector .panel .panel-heading .panel-image-mobile { display: block; position: relative; overflow: hidden; width: 30%; height: 110px; background-size: cover; background-repeat: no-repeat; background-position: center; }

  #sprayer_selector > [id^="step"] { display: block; }

  #step2 .panel-content .pull-right { float: left !important; }

  #sprayer_selector .panel#step2 .panel-content { padding-left: 0; }
  #sprayer_selector .panel#step2 .panel-heading h2 { padding: 0 18px; text-align: left; }

  #sprayer_selector .panel#step3 .button-mobile { display: block; text-align: center; }
  #sprayer_selector .panel#step3 .panel-heading .button { display: none; }
  #sprayer_selector .panel#step3 .panel-heading {  text-align: left; }
  #sprayer_selector .panel#step3 .panel-heading h2 { width: 100%; text-align: left; padding: 20px 18px; }
}

@media( max-width: 478px ) {
  #sprayer_selector .panel .row { padding: 10px 20px; margin: 0 !important; }
}




.projects-wrapper { position: relative; }
.projects-wrapper .loading { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; padding-top: 60px; background: rgba( 0,0,0,.5 ); z-index: 999; }
.projects-wrapper.loading .loading { display: block; }
.projects-filter { background: #ebebeb; padding: 32px; width: 30%; }
.projects-filter .accordion a { color: #000; text-decoration: none; }
.projects-filter .accordion .card-header { padding-bottom: 25px; border-bottom: 2px solid #b3b3b3; margin-bottom: 28px; }
.projects-filter .checkbox label { font-size: 18px; padding-left: 40px; }
.projects-filter .checkbox label:before { border-width: 2px; background: transparent; }
.projects-filter .mobile-heading{ display: none; }
.projects-filter .mobile-submit { display: none; }

.projects-filter .card { margin-bottom: 40px; }
.projects-filter .card h3 { position: relative; }
.projects-filter .card .rotate-icon { position: absolute; background: url('./img/Icon-arrow.svg'); width: 36px; height: 36px; right: 0; transition: transform .3s ease-in-out; }
.projects-filter .expand-icon { position: absolute; background: url('./img/Icon-plus.svg'); background-position: center; background-repeat: no-repeat; width: 36px; height: 36px; right: 0; transition: transform .3s ease-in-out; }
.projects-filter .card .card-header a.collapsed .rotate-icon { transform: rotate(90deg); }

.projects-filter .card .collapse.in { display: block !important; }
.projects-filter .card .collapse { display: none !important; }

.brick.projects-wrapper { padding: 0; overflow: hidden; }
.brick.projects-wrapper .projects-listing { background: #fff; width: 70%; padding: 41px 20px; }

.brick.projects-wrapper--filter { display: flex; flex-direction: row; }

.projects-filter .checkbox input[type="checkbox"]:checked + label:before { background: url('./img/Icon-check.svg') !important; box-shadow: none !important; }
.projects-filter .checkbox label:before { transition: background .3s !important; }


.projects-banner { background: #ffcb05;  display: flex; padding: 0 !important; }
.projects-banner h1 { font-size: 72px; width: 70%; padding: 38px 0 43px 35px; }
.projects-banner .banner-image { position: relative; overflow: hidden; background: #000; width: 30%; text-align: right; }
.projects-banner .banner-image img { height: 100%; width: auto; padding: 16px; }
.projects-banner .banner-triangle { position: absolute; top: 0; bottom: 0; right: 89%; width: 300px; transform: skew(-18deg); background: rgb(128,173,190); background: #e2e2e2; background: #ffcb05; }

@media( max-width: 1229px ) {
  .projects-banner .banner-triangle { right: 86%; }
}

@media( max-width: 991px ) {
  .projects-banner .banner-triangle { right: 86%; }
}

@media( max-width: 769px ) {
  .projects-banner .banner-image { display: none; }
  .projects-filter .mobile-heading { display: block; padding: 17px 37px; border-bottom: 8px solid #b3b3b3; }
  .projects-filter .mobile-heading .expand-icon { width: 26px; height: 26px; }
  .projects-filter .mobile-heading.expanded .expand-icon { transform: rotate(90deg); }
  .projects-filter .mobile-heading h3 { position: relative; }
  .projects-filter form { display: none; }
  .brick.projects-wrapper { display: flex; flex-direction: column; }
  .brick.projects-wrapper .projects-listing  { width: 100%; }
  .projects-filter { width: 100%; padding: 0; }
  .projects-filter .accordion .card-header { margin-bottom: 7px; }
  .projects-filter .accordion .card-header h3 { padding: 21px 37px 0 37px; }
  .projects-filter .card  { margin-bottom: 0px; }
  .projects-filter .card .rotate-icon { right: 33px; }
  .projects-filter .card .collapsing,
  .projects-filter .card .collapse { padding: 0 37px; }
  .projects-filter .mobile-submit { display: block; text-align: center; padding: 20px 0 40px; }
}

.product-feature-brick-reworked { display: flex; padding: 0 !important; }
.product-feature-brick-reworked .product-feature-content h1 { margin-bottom: 15px; }
.product-feature-brick-reworked .product-feature-content { width: 42%; padding: 49px 40px; }
.product-feature-brick-reworked .product-feature-aside { width: 58%; background-position: center; background-repeat: no-repeat; background-size: cover; }

@media(max-width: 1229px) {
  .product-feature-brick-reworked .product-feature-content h1 { font-size: 36px; }
} 

@media(max-width: 991px) {
  .product-feature-brick-reworked .product-feature-content h1 { font-size: 25px; }
}

@media(max-width: 768px) { 
  .product-feature-brick-reworked { flex-direction: column; }
  .product-feature-brick-reworked .product-feature-content { width: 100%; padding: 18px; }
  .product-feature-brick-reworked .product-feature-content h1 { font-size: 16px; }
  .product-feature-brick-reworked .product-feature-content p { font-size: 12px; }

  .product-feature-brick-reworked .product-feature-aside { width: 100%; height: 273px; }
}

@media (min-width: 768px) {
  .projects-filter .checkbox label { font-size: 16px; }
  .project .content-overlay-wrapper {width: 194px; }
}

@media (min-width: 992px) {
  .projects-filter .card h3 { font-size: 2.4rem; }
  .projects-filter .card .rotate-icon { width: 29px; height: 29px; background-position: center; }
}

@media (max-width: 767px) and (min-width: 568px) {
  .project .content-overlay-wrapper {width: 45%; }
}

.lead.text-black { color: #000; }