css/site.css

:root {
  --grey: #f6f6f6;
  --grey2: #e6e6e6;
  --grey3: #f0f0f0;
  --grey4: #9c9c9c;
  --grey5: #6e6e6e;
  --blue: #0070cc;
  --blue2: #0061b0;
  --blue3: #91c2ea;
  --blue4: #e8f2fa;
  --red: #ed1c24;
  --red2: #ce2034;
  --red3: #f4898d;
  --red4: #ffcfd1;
  --red5: #feeff0;
  --dark: #2d2d2d;
  --dark2: #6e6e6e;
  --dark3: #9c9c9c;
}

.hdr {
  border-bottom: 1px solid var(--grey3);
  position: relative;
  height: 96px;
}
.hdr__wrap{
  padding: 0 45px;
  height: 96px;
  align-items: center;
  position: relative;
  position: relative;
  z-index: 120;
}
.hdr__logo {
  display: block;
  margin-right: auto;
  width: 115px;
}
.hdr__burger {
  display: none;
  width: 24px;
  height: 24px;
  border: none;
  flex-shrink: 0;
  flex-grow: 0;
  margin-right: 2rem;
  background: none;
  cursor: pointer;
}
.hdr__burger img {
  display: block;
  margin: 0 auto;
}
.hdr__logoimg {
  display: block;
  width: 100%;
  height: auto;
}
.hdr__logo--white{
  display: none;
}
.hdr__button {
  margin-left: auto;
  white-space: nowrap;
  padding: 0 25px;
}
.hdrmenu {
  position: absolute;
  z-index: 10;
  top: 0;
  height: 100%;
  transform: translateX(-50%);
  left: 50%;
}
.hdrmenu>ul{
  align-items: stretch;
  height: 100%;
}
.hdrmenu li {
  padding: 0 1rem;
  display: flex;
  flex-flow: column nowrap;
}
.hdrmenu a {
  color: #000;
  font-size: 1.6rem;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 2rem;
  position: relative;
}
a.hdrmenu--expanded:hover::before,
a.hdrmenu--expanded.active::before{
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 3px;
  height: 3px;
  background: #fff;
}
.hdr__white .hdrmenu a:hover::before,
.hdr.opened .hdrmenu a:hover::before,
.hdr__white .hdrmenu a.active::before,
.hdr.opened .hdrmenu a.active::before{
  background: var(--dark);
}
.hdrmenu--expanded::after{
  margin-left: 6px;
  content:"";
  display: block;
  width: 12px;
  height: 9px;
  position: relative;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0L11.1962 9L0.803848 9L6 0Z' fill='%236E6E6E'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  transform: rotate(180deg);
  transition: transform 0.25s ease;
}
.hdrmenu--expanded:hover::after{
  filter:brightness(0);
}
.hdrmenu--expanded.active::after{
  transform: rotate(0);
}
.hdrmenu__current {
  font-weight: 700;
}
.hdrmenu a:hover {
  color: #000;
}
.hdr__blue,
.hdr__dark{
  background: var(--blue);
  border-bottom: none;
}
.hdr__dark{
  background: var(--dark);
}
.hdr:not(.hdr__white):not(.opened) .hdrmenu a{
  color: #fff;
}
.hdr:not(.hdr__white):not(.opened) .hdrmenu a:hover{
  color: #f2f2f2;
}
.hdr:not(.hdr__white):not(.opened) .hdr__button{
  background: #fff;
  color: var(--blue);
}
.hdr:not(.hdr__white):not(.opened) .hdr__button:hover{
  background: var(--blue4);
}
.hdr__grey {
  background: #f1f1f1;
}

.hdr:not(.opened):not(.hdr__white) .hdr__logo--black{
  display: none;
}
.hdr:not(.opened):not(.hdr__white) .hdr__logo--white{
  display: block;
}
.hdr:not(.opened):not(.hdr__white) .hdrmenu--expanded::after{
  filter: brightness(0) invert(1);
}


.hdr.opened .hdr__wrap{
  background: #fff;
}

body .hdr.opened .hdr__wrap{
  background: #fff;
}


.dropmenu{
  display: block;
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  background: #fff;
  z-index: 100;
  opacity: 1;
  height: 0;
  overflow: hidden;
  transition: height 0.2s ease;
}
.dropmenu__back{
  position: fixed;
  pointer-events: none;
  z-index: 98;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:#000;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.dropmenu.active{
  opacity: 1;
}
.dropmenu__back.active{
  opacity: 0.4;
  pointer-events: auto;
}
.dropmenu__panel{
  box-shadow: inset 0 0 0 1px var(--grey3);
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  background: #fff;
  opacity: 0;
  /* transform: translateY(-10px); */
  /* transition: opacity 0.3s ease, transform 0.3s ease, height 0.3s ease; */
  pointer-events: none;
  display: none;
}
.dropmenu__panel.active{
  display: block;
  opacity: 1;
  height: auto;
  pointer-events: auto;
  transform: translateY(0px);
}
.dropmenu1__grid,
.dropmenu2__grid,
.dropmenu3__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  grid-gap: 0;
  padding-top: 50px;
  padding-bottom: 20px;
}
.dropmenu1__buttonwrap{
  padding-top: 5rem;
}

.dropmenu__redbutton{
  margin-bottom: 11px;
  height: 60px;
  padding: 0 30px;
  width: 100%;
  max-width: 240px;
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  background: var(--red5);
  border-radius: 1rem;
  white-space: nowrap;
  color:#000;
  transition: background 0.3s ease;
}
.dropmenu__redbutton img{
  flex-shrink: 0;
  margin-right: 5px;
}
.dropmenu__redbutton span{
  display: block;
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.dropmenu__redbutton span::after{
  content:"";
  display: block;
  margin-left: 9px;
  width: 14px;
  height: 13px;
  background: url(../img/menu/icon-arrow.svg) no-repeat;
  background-size: contain;
  transition: transform 0.3s ease;
}
.dropmenu__redbutton:hover{
  text-decoration: none;
  color:#fff;
  background: var(--red);
}
.dropmenu__redbutton:hover img{
  filter: brightness(0) invert(1);
}
.dropmenu__redbutton:hover span::after{
  filter: brightness(0) invert(1);
  transform: translateX(3px);
}

.dropmenu__box{
  position: relative;
  min-height: 210px;
  padding-top: 4.7rem;
  padding-left: 18px;
  padding-right: 18px;
  width: 100%;
  padding-bottom: 15px;
}
.dropmenu__box::after{
  content:"";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--grey2);
}
.dropmenu__box:first-child::after,
.dropmenu__box.no-border::after{
  display: none;
}
.dropmenu__iconitem{
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 20px 10px 15px;
  border-radius: 1rem;
  color:#000 !important;
}
.dropmenu__iconitem img{
  display: block;
  max-width: 20px;
  max-height: 20px;
  object-fit: contain;
}
.dropmenu__iconitem span{
  display: block;
  padding-left: 10px;
  white-space: nowrap;
}
.dropmenu__iconitem:hover{
  text-decoration: none;
  background: var(--blue4);
}
.dropmenu__box .capstext{
  color:var(--grey4);
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  font-size: 12px;
  line-height: 18px;
}
.dropmenu__capslink{
  text-decoration: underline;
  color:var(--grey4);
}
.panelmorelinkwrap{
  text-align: center;
  padding-top: 5px;
  padding-bottom: 15px;
}
.panelmorelinkwrap--end .panellink{
  width: 50%;
  display: block;
  margin-left: auto;
}
.panellink{
  color:#000;
  display: inline-block;
}
.panellink:hover{
  color:#000;
}

.dropmenu1__grid{
  grid-template-columns: 1.6fr 2fr 2fr 2fr;
}
.dropmenu__box--buttonin{
  padding-top: 20px;
}
.dropmenu__box--buttonin::after{
  display: none;
}


.hdrfloat {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background-color: #fff;
  transition: margin-top 0.2s linear;
  pointer-events: none;
  margin-top: -75px;
}
.hdr-active .hdrfloat {
  margin-top: 0;
  pointer-events: auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
@media (min-width: 992px) {
  .hdrfloat .hdr__wrap {
    height: 75px;
  }
  .hdrfloat .hdr__button {
    height: 45px;
  }
}



.cmtynavblock {
  background: #fff;
  position: sticky;
  transition: top 0.2s ease, transform 0.2s ease;
  left: 0;
  z-index: 100;
  border-top: 1px solid var(--grey3);
  border-bottom: 1px solid var(--grey3);
  height: 8rem;
  top: 0;
}
.hdr-active .cmtynavblock {
  top: 75px;
}
.cmtynavblock .container {
  height: 100%;
}
.cmtynavblock__list {
  height: 100%;
  align-items: stretch;
  justify-content: center;
}
.cmtynavblock__list li {
  padding: 0 55px;
  height: 100%;
}
.cmtynavblock__list a {
  height: 100%;
  display: flex;
  white-space: nowrap;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 10px;
  text-decoration: none;
  color: var(--dark);
  position: relative;
}
.cmtynavblock__list a:not(.cmtynavblock__active):hover {
  color: var(--blue2);
}
.cmtynavblock__active::after {
  position: absolute;
  content: "";
  display: block;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--dark);
  border-radius: 3px;
}






/* === === === === === === === === FOOTER === === === === === === === === */
.footer {
  background: var(--grey3);
}
.footer__top {
  position: relative;
  padding-top: 8rem;
  padding-bottom: 8rem;
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  justify-content: flex-start;
  border-bottom: 1px solid var(--grey2);
}
.footer1,
.footer2,
.footer3,
.footer4{
  flex-shrink: 1;
  flex-grow: 1;
  width: 20%;
}
.footer2{
  width: 25%;
}
.footer__title {
  display: block;
  font-weight: 700;
  color:#000;
  margin-bottom: 2rem;
}
.footer__title:last-child{
  margin-bottom: 0;
}
.footer__title:hover{
  color:var(--dark);
}
.footer__menu li:not(:last-child){
  padding-bottom: 1rem;
}
.footer__menu a{
  color:#000;
  white-space: nowrap;
  display: inline-block;
}
.footer4__item {
  font-weight: 700;
}
.footer4__socwrap {
  padding-bottom: 5rem;
}
.footer4__soc {
  display: block;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  margin-right: 17px;
}
.footer4__soc img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.footer4__button {
  height: 60px;
  padding: 0 20px;
  font-size: 16px;
  white-space: nowrap;
  display: inline-flex;
}
.footer__bot {
  padding-top: 4rem;
  padding-bottom: 6rem;
  font-size: 14px;
  line-height: 1.3;
}


@media(max-width:992px){
  .footer__top{
    flex-flow: row wrap;
  }
  .footer1, .footer2, .footer3, .footer4{
    width: 50%;
  }
  .footer3, .footer4{
    padding-top: 5rem;
  }
}

@media(max-width:767px){
  .footer__top{
    padding-top: 6rem;
    padding-bottom: 4rem;
    justify-content: space-around;
  }
  .footer__title{
    display: inline-block;
  }
  .footer__menu a{
    font-size: 12px;
    white-space: normal;
  }
  .footer1{
    width: calc(50% - 30px);
    overflow: hidden;
    border-right: 1px solid var(--grey2);
    box-sizing: border-box;
    margin-right: 30px;
  }
  .footer2{
    overflow: hidden;
    width:50%;
    box-sizing: border-box;
  }
  .footer3, .footer4{
    width: 100%;
    text-align: center;
  }
  .footer4{
    padding-top: 4rem;
  }
  .footer3 .footer__title{
    margin: 0 10px;
  }
  .footer4__socwrap{
    justify-content: center;
  }
  .footer4__soc{
    margin-left: 10px;
    margin-right: 10px;
  }
  .footer4__socwrap{
    padding-bottom: 3rem;
  }
  .footer4__button{
    height: 50px;
  }
  .footer__bot{
    font-size: 13px;
    padding-bottom: 5rem;
  }
}
/* === === === === === === === === /END FOOTER === === === === === === === === */













/* === === === === === === === === INNERPAGE BLOCKS === === === === === === === === */
.innerhero {
  background: var(--blue);
  color: #fff;
  position: relative;
  padding: 8rem 0 11rem;
  overflow: hidden;
}
.innerhero__main {
  min-height: 400px;
  max-width: 830px;
  width: 65%;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  justify-content: center;
}
.innerhero__main {
  min-height: 300px;
}
.innerhero__mega{
  font-size: 7rem;
  line-height: 1.18;
  padding-top: 2rem;
}
.innerhero__main--long {
  max-width: none;
  width: 100%;
}
.innerhero__pre {
  text-transform: uppercase;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.with-apache{
  font-weight: normal;
}
.innerhero__descr {
  font-weight: 400;
  opacity: 0.8;
}
.innerhero__button {
  color: #fff;
  border: 2px solid #fff;
  background: #fff;
  color: var(--blue);
  font-size: 2rem;
  line-height: 1;
  padding: 0 4rem;
  margin-top: 5rem;
  height: 6rem;
}
.innerhero__button:hover {
  background: var(--grey);
  color: var(--blue);
}
.innerhero__pic {
  position: absolute;
  display: block;
}

.cardsimple {
  border: 1px solid var(--grey2);
  background: #fff;
  box-sizing: border-box;
  border-radius: 10px;
  transition: box-shadow 0.4s ease;
  position: relative;
}
.cardsimple:hover {
  box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.1);
}

.usecasecard {
  min-height: 29rem;
  padding: 3rem 3rem 10rem;
}
.cardsimple__icon {
  width: 48px;
  height: 48px;
  margin-bottom: 2rem;
}
.cardsimple__icon img {
  width: 100%;
  height: 100%;
  display: block;
}
.cardsimple__title {
  font-size: 2rem;
  line-height: 2.6rem;
  font-weight: bold;
  padding-bottom: 1.2rem;
}
.cardsimple__text:not(.cardsimple__text--long) {
  max-width: 280px;
}
.cardsimple__bottom {
  position: absolute;
  bottom: 3rem;
  left: 3rem;
  z-index: 10;
}
.cardsimple__button,
.blockheader__button {
  width: 125px;
  height: 45px;
}

.blockcapslead {
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  padding-bottom: 6rem;
}
.blockheader {
  flex-flow: column nowrap;
  align-items: stretch;
  position: relative;
  padding-top: 3rem;
}
.blockheader:not(.blockheader--spl)::before {
  content: "";
  display: block;
  width: 4rem;
  height: 3px;
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
}
.blockheader--spl {
  padding-top: 0;
}
.blockheader__left {
  width: 45%;
  padding-right: 4rem;
  flex-shrink: 0;
}
.blockheader__left--full {
  width: 100%;
}
.blockheader__right {
  display: block;
  padding-top: 2rem;
  max-width: 850px;
}
.blockheader__right p:not(:last-child) {
  margin-bottom: 1rem;
}
.blockheader__button {
  margin-top: 3rem;
}
.blockheader--hor {
  flex-flow: column nowrap;
}
.blockheader--hor .blockheader__right {
  margin-left: 0;
  padding-top: 2rem;
}

.dashlist li {
  margin-bottom: 10px;
  position: relative;
  padding-left: 21px;
}
.dashlist li::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 1.2rem;
  height: 1px;
  width: 15px;
  background: #000;
}
.videoscr {
  position: relative;
  display: block;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  transition: box-shadow 0.3s ease;
}
.videoscr img,
.videoscr a,
.videoscr iframe {
  display: block;
  border: none;
  width: 100%;
  max-width: 350px;
  height: auto;
  transform: translate3d(0, 0, 0);
  transition: transform 0.3s ease;
}
.videoscr:hover img {
  transform: scale(1.01);
}
.videoscr:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
}
.videoscr::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 1;
  background-image: url(../img/icon-video.svg);
  background-repeat: no-repeat;
  background-size: 4rem;
  background-position: 50% 50%;
  transition: background 0.3s ease;
}
.videoscr__descr {
  padding-top: 1.5rem;
  color: var(--grey4);
  max-width: 350px;
}

/* === VIDEO with TITLE === */
.comvideo {
  max-width: 524px;
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
}
.comvideo__box {
  display: block;
  position: relative;
  width: 100%;
  height: 0;
  box-sizing: border-box;
  padding-bottom: 62%;
  overflow: hidden;
  background: var(--dark3);
}
.comvideo__screen,
.comvideo__box iframe {
  border: none;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
}
.comvideo__screen[data-youtube]::after {
  pointer-events: none;
  content: "";
  display: block;
  position: absolute;
  z-index: 20;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: url(../img/icon-video.svg) center center no-repeat;
  background-size: 40px;
  transition: background 0.2s ease;
}
.comvideo__screen:hover[data-youtube]::after {
  background-color: rgba(0, 0, 0, 0.1);
}
.comvideo__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
}
.comvideo__txt {
  position: absolute;
  z-index: 5;
  font-size: 2.4rem;
  line-height: 1.6;
  top: 3.5rem;
  left: 3.5rem;
  max-width: 75%;
  color: #fff;
}
.comvideo__txt--black {
  color: #000;
}
.comvideo__txt--small{
  font-size: 1.9rem;
  line-height: 1.5;
  max-width: 80%;
  top: 2rem;
  left: 2rem;
}
.comvideo__txt--medium {
  font-size: 2.2rem;
  line-height: 1.5;
  max-width: 80%;
  top: 2rem;
  left: 2rem;
}
.comvideo__sub {
  position: absolute;
  left: 3rem;
  bottom: 3rem;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 2px;
  color: #fff;
  z-index: 10;
}
.comvideo__txt--black + .comvideo__sub {
  color: #000;
}
.comvideo__descr p {
  margin-bottom: 0.5rem;
}
.comvideo__gray {
  font-style: italic;
  color: var(--grey5);
}
/* === END VIDEO with TITLE === */
.picwrap {
  background: var(--grey);
  border-radius: 1rem;
  padding: 6rem 0 6rem;
  max-width: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
}
.picwrap img {
  display: block;
  margin: auto;
}

@media (max-width: 1199px) {
  .innerhero__main {
    width: auto;
    min-height: auto;
  }
}

@media (max-width: 992px) {
  .innerhero__main {
    width: auto;
    min-height: auto;
  }
}

@media (max-width: 767px) {
  .innerhero__main {
    max-width: none;
    width: auto;
    min-height: auto;
  }
  .innerhero__main br {
    display: none;
  }
  .innerhero__pre {
    padding-bottom: 2rem;
  }
  .innerhero__main .h1 {
    font-size: 4.4rem;
    line-height: 1.15;
  }
  .innerhero__button {
    margin-top: 3rem;
    height: 5rem;
  }
  .innerhero__pic {
    display: none;
  }
  .blockcapslead {
    padding-bottom: 3rem;
  }
  .blockheader {
    flex-flow: column nowrap;
    align-items: stretch;
  }
  .blockheader__left {
    width: auto;
    font-size: 2.6rem;
    line-height: 3.6rem;
    padding-right: 0;
  }
  .blockheader__left br {
    display: none;
  }
  .blockheader--hor .blockheader__right {
    padding-top: 0;
  }
  .blockheader__right {
    padding-top: 1.5rem;
  }
  .cardsimple {
    padding: 3rem 2rem;
    min-height: auto;
  }
  .cardsimple__bottom {
    position: relative;
    bottom: auto;
    left: auto;
    padding-top: 3rem;
  }
  .cardsimple__icon {
    width: 32px;
    height: 32px;
  }
  .dashlist li {
    margin-bottom: 5px;
  }
}
/* === === === === === === === === END INNERPAGE BLOCKS === === === === === === === === */