body { margin: 0; background-color: #F13941; font-family: 'roc-grotesk', Arial, sans-serif; }

.pf-box { width: 100%; height: 100%; box-sizing: border-box; padding: 35px 20px; text-align: center; }
.pf-box-inner { font-size: 60px; line-height: 71px; font-weight: 700; color: #fff; position: relative; overflow: auto; height: -webkit-calc(100vh - 70px); height: calc(100vh - 70px); margin: 0 auto; max-width: 1084px; }
.pf-box-content { padding: 0 55px 0 0; text-align: left; }

.pf-box-content h1 { font-size: 160px; line-height: 156px; margin: 10px 0 75px; }
.pf-box-content h1 img { display: inline-block; vertical-align: baseline; }
.pf-box-content p { margin: 0 0 60px; }
.pf-box-content .btn-text { display: inline-block; vertical-align: top; position: relative; background-color: #fff; color: #F13941; line-height: 71px; transition: 0.2s all ease-out; padding: 0 2px; cursor: pointer; text-decoration: none; }
.pf-box-content .btn-text::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 100%; background-color: #fff; border: 0 solid #fff; transition: 0.2s all ease-out; }
.pf-box-content .btn-text span { position: relative; z-index: 2; }
.pf-box-content .btn-text.arrow { padding-right: 85px; }
.pf-box-content .btn-text.arrow::after { content: ''; position: absolute; width: 100%; height: 36px; top: 50%; transform: translateY(-50%); right: 30px; background: url('../img/arrow.svg') 100% 50% no-repeat; background-size: auto 100%; transition: 0.2s all ease-out; }
.pf-box-content .btn-text:hover { text-decoration: underline; }
.pf-box-content .btn-text:hover::before { border-top-width: 5px; border-bottom-width: 5px; }
.pf-box-content .btn-text:hover.arrow::after { right: 15px; }

.pf-box-content .logo { margin: 270px 0 0; text-align: center; }
.pf-box-content .logo a { opacity: 1; transition: 0.3s opacity ease-out; margin: 0 auto; display: inline-block; vertical-align: top; }
.pf-box-content .logo a:hover { opacity: 0.6; }

.simplebar-track.simplebar-horizontal { display: none; }
.simplebar-track.simplebar-vertical { width: 24px !important; padding: 3px 0; }
.simplebar-track.simplebar-vertical::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 999px; border: 3px solid #fff; box-sizing: border-box; }
.simplebar-scrollbar { padding: 0; width: 24px !important; cursor: pointer !important; }
.simplebar-scrollbar::before { left: 6px !important; right: 6px !important; top: 3px !important; bottom: 9px !important; opacity: 1 !important; cursor: pointer !important; background-color: #fff !important; }


/* dialogs */
.pf_dialog { position: absolute; max-width: 100%; max-height: 100%; height: 100%; padding: 50px; display: inline-flex; flex-direction: row; justify-content: center; align-items: center; left: 0; right: 0; top: 0; bottom: 0; box-sizing: border-box; z-index: 101; pointer-events: none; margin: auto; }
.pf_dialog:before { content: ''; position: fixed; left: 50%; top: 50%; width: 0; height: 0; transition: 0.15s all 0.2s ease-out; }
.pf_dialog-inner { transition: 0.2s all 0s ease-out; position: relative; left: 0; top: 0; position: relative; overflow: hidden; background-color: #F13941; width: auto; display: flex; max-height: 100%; transform: scale(0); }
.pf_dialog.active { pointer-events: all; }
.pf_dialog.active:before { left: 0; top: 0; width: 100vw; height: 100vh; background: #F13941; transition: 0.3s background 0s ease-out; }
.pf_dialog.active .pf_dialog-inner { transition: 0.2s all 0.2s ease-out; transform: scale(1); }

.pf_dialog-flex-content { position: relative; display: block; width: 100%; }
.pf_dialog-flex-content-inner { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; }
.pf_dialog-flex-content main { position: relative; display: block; overflow: auto; width: 100%; max-width: 100%; box-sizing: border-box; max-width: 1084px; }
.pf_dialog-flex-content main img { max-width: 100%; width: auto; height: auto; }



@media screen and (max-width: 1120px) {
    
    .pf-box { padding: 30px 20px; }
    .pf-box-inner { font-size: 48px; line-height: 60px; height: -webkit-calc(100vh - 60px); height: calc(100vh - 60px); }

    .pf-box-content h1 { font-size: 110px; line-height: 110px; margin: 10px 0 55px; }
    .pf-box-content h1 img { max-height: 80px; width: auto; }
    .pf-box-content p { margin: 0 0 45px; }
    .pf-box-content .btn-text { line-height: 60px; }
    .pf-box-content .btn-text.arrow { padding-right: 75px; }
    .pf-box-content .btn-text.arrow::after { height: 32px; right: 25px; }
    .pf-box-content .btn-text:hover::before { border-top-width: 4px; border-bottom-width: 4px; }

    .pf-box-content .logo { margin: 180px 0 0; }

    .pf_dialog { padding: 30px; }
}


@media screen and (max-width: 600px) {

    .pf-box { padding: 25px 20px; }
    .pf-box-inner { font-size: 32px; line-height: 45px; height: -webkit-calc(100vh - 50px); height: calc(100vh - 50px); }

    .pf-box-content h1 { font-size: 68px; line-height: 72px; margin: 5px 0 50px; }
    .pf-box-content h1 img { max-height: 51px; }
    .pf-box-content p { margin: 0 0 42px; }
    .pf-box-content .btn-text { line-height: 45px; }
    .pf-box-content .btn-text.arrow { padding-right: 65px; }
    .pf-box-content .btn-text.arrow::after { height: 24px; right: 20px; }
    .pf-box-content .btn-text:hover::before { border-top-width: 3px; border-bottom-width: 3px; }

    .pf-box-content .logo { margin: 120px 0 0; }

    .pf_dialog { padding: 25px; }
}