.panel {text-align: center; padding: 70px 20px}
.panel, .panel * {box-sizing: border-box; -moz-box-sizing: border-box}
.panel a {
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.clearBtn, .colorBtn {margin: 15px 10px; white-space: nowrap; display: inline-block; color: #fff}
.clearBtn:hover, .colorBtn:hover, .panel2 p, .panel3 p {color: #fff}
.clearBtn {border: 2px solid #fff; padding: 7px 20px}
.clearBtn:hover {opacity: 0.6}
.colorBtn {padding: 9px 20px; font-size: 16px}
.roundedBtn {border-radius: 50px}

.panel1 > div {margin: auto; width: 100%; max-width: 1300px}
.panel1.stripe > div .block {border: 1px solid #e5e5e5; border-top-width: 3px; padding: 10px 20px; color: #222; background-color: #fff}
.panel1.stripe > div a.block:hover {border-right-color: #c8c8c8; border-bottom-color: #c8c8c8; border-left-color: #c8c8c8; box-shadow: 2px 2px 11px rgba(0,0,0,0.1)}
.panel1 > div .block {margin: 20px 2%; display: inline-block; vertical-align: top; width: 100%}
.panel1 .flexFixer {width: 80%; margin: 0 auto 20px; max-width: 350px}
.panel1 .imgCrop {background-position: 50%}
.panel1.circularImg .flexFixer {width: 60%; max-width: 260px; margin: 0 auto 20px}
.panel1.circularImg .imgCrop {border-radius: 50%; padding-bottom: 100%; width: 100%; margin: auto}
.panel1 p {line-height: 24px}
.flexbox .panel1 > div, .flexbox .panel1 .block {display: -webkit-flex; display: flex}
.flexbox .panel1 > div {-webkit-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: center; justify-content: center}
.flexbox .panel1 .block {-webkit-flex-direction: column; flex-direction: column}
.flexbox .panel1 .block .btnHolder {margin-top: auto}

.panel2 {background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; position: relative; color: #fff; width: 100%}
.panel2:before {content: ''; background-color: rgba(0,0,0,0.4); width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0}
.panel2 > div {position: relative; text-align: center}
.panel2 > div p {max-width: 1000px; margin: 10px auto}
.panel2.counter .countHolder {display: inline-block; width: 45%; min-width: 200px; margin: 15px 2%; vertical-align: top}
.panel2.counter.row-3-blocks .countHolder {width: 29%}
.panel2.counter.row-4-blocks .countHolder {width: 20%}
.panel2.counter .countHolder .count {font-size: 54px}
.panel2.counter .countHolder .countItem {max-width: 280px; margin: auto}
.panel2.counter.row-4-blocks .countItem {max-width: 250px}

.panel3 {color: #fff; background-color: #048497}
.panel3 .clearBtn {padding: 5px 13px}
.panel3 .colorBtn, .panel3 .clearBtn {margin-bottom: 0}

.panel4 > div {width: 100%; max-width: 850px; margin: 0 auto}
.panel4 > div p {line-height: 26px; margin: 25px 0}
.panel4 .colorBtn, .panel4 .clearBtn {margin: 5px 10px 0}
.panel4.withBorder > div {border: 2px solid #D54779; padding: 20px}

#contentWrap .panel .medText, #contentWrap .panel3 p {font-size: 17px}
#contentWrap .panel .lrgText, #contentWrap .customHome h2 {font-size: 22px; line-height: 29px}

@media screen and (min-width: 480px) {
  .panel1 > div .block {width: 46%}
}
@media screen and (min-width: 740px) {
  .panel1 > div:not(.row-2-blocks) .block {width: 29%}
}
@media screen and (max-width: 767px) {
  .panel2 {padding: 40px 20px}
}
@media screen and (min-width: 768px) {
  #contentWrap .panel .medText {font-size: 19px}
  #contentWrap .panel .lrgText, #contentWrap .customHome h2 {font-size: 30px; line-height: 37px}

  .panel2 {height: 340px; display: table}
  .panel2 > div {display: table-cell; vertical-align: middle}
  .site_full_width .panel2 {display: flex}
  .site_full_width .panel2 > div {display: block; vertical-align: middle; margin: auto; width: 100%}
  .panel4.withBorder {padding: 70px 40px}
  .panel4.withBorder > div {padding: 40px 70px}
}
@media screen and (min-width: 979px) {
  .panel3 br {display: none}
  .panel3 .colorBtn, .panel3 .clearBtn {margin: 0 0 0 10px}
}
@media screen and (min-width: 980px) {
  .panel1 > div.row-4-blocks .block {width: 21%}
}
@media screen and (min-width: 1025px) {
  .panel2.fixedBg {background-attachment: fixed}
}
@media screen and (min-width: 1280px) {
  .panel2 {padding-left: 240px; padding-right: 240px}
  .panel2.row-3-blocks {padding-left: 120px; padding-right: 120px}
  .panel2.row-4-blocks {padding-left: 70px; padding-right: 70px}
  .site_full_width .panel2 {padding: 0 !important}
  .site_full_width .panel2 > div, .site_full_width .panel > p.medText {width: 100%; margin: auto; max-width: 1400px; box-sizing: border-box}
  .site_full_width .panel > p.medText {max-width: 1300px}
}
