@font-face {
    font-family: 'Sassoon Infant Std';
    src: url(../fonts/sassooninfantstd.woff2) format('woff2');
    font-style: normal
}

@font-face {
    font-family: FuturaPT;
    src: url(../fonts/FuturaPTLight.woff2) format('woff2');
    font-weight: 300
}

@font-face {
    font-family: FuturaPT;
    src: url(../fonts/FuturaPTBook.woff2) format('woff2');
    font-weight: 400
}

@font-face {
    font-family: FuturaPT;
    src: url(../fonts/FuturaPTMedium.woff2) format('woff2');
    font-weight: 500
}

@font-face {
    font-family: FuturaPT;
    src: url(../fonts/FuturaPTDemi.woff2) format('woff2');
    font-weight: 600
}

@font-face {
    font-family: FuturaPT;
    src: url(../fonts/FuturaPTBold.woff2) format('woff2');
    font-weight: 700
}

:root {
    --font-primary: 'FuturaPT', sans-serif;
    --font-futura: 'FuturaPT', sans-serif;
    --font-sassoon: 'Sassoon Infant Std', sans-serif;

    --font-sz-default: 16px;
    --font-sz-default: max(16px, 2.6vmin);

    --font-weight-default: 400;
    --font-lh-default: normal;

    --clr-black: #161616;
    --clr-bg-turquoise: #228195;
    --clr-primary-orange: #ef7c01;
    --clr-orange-600: #f59c3d;
    --clr-orange-400: #ffba75;
    --clr-orange-200: #FFE1C1;
    --clr-primary-turquoise: #00697F;
    --clr-secondary-turquoise: #5ba5b4;
    --clr-secondary-light-turquoise: #B4D3D8;
    --clr-turquoise: #80b6c2;
    --clr-turquoise-md: #388D9F;
    --clr-grey-900: #464646;
    --clr-grey-200: #D4D4D4;

    --body-color: var(--clr-black);
    --body-bg: #fff;

    --bs-form-invalid-color: #FF4D4D;
    --bs-form-invalid-border-color: #FF4D4D;
}

*,
::after,
::before {
    box-sizing: border-box
}

@media (prefers-reduced-motion:no-preference) {
    :root {
        scroll-behavior: smooth
    }
}

html {
    font-size: var(--font-sz-default);
}

html, body {
    margin: 0;
    padding: 0
}

body {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-default);
    line-height: var(--font-lh-default);
    color: var(--body-color);
    background-color: var(--body-bg);
    text-size-adjust: 100%;
}

.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
}

p {
    margin-top: 0;
    margin-bottom: 1rem
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
    color: inherit;
    text-decoration: none
}

.ff-sassoon {
    font-family: var(--font-sassoon) !important
}

.ff-futura {
    font-family: var(--font-futura) !important
}

.fw-500 {
    font-weight: 500
}

.bg-secondary-turquoise {
    background-color: var(--clr-secondary-turquoise);
}

.bg-primary-turquoise {
    background-color: var(--clr-primary-turquoise);
}

button {
    border-radius: 0
}

button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

button, select {
    text-transform: none
}

[role=button] {
    cursor: pointer
}

#sIntro,
#sRwe,
#presentationIntro,
#presentationContent {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

#presentationIntro {
    z-index: 2;
}

#presentationContent {
    display: grid;
    grid-template-rows: 13.56vh 1fr 3.5vh;
}

#presentationContent.smallHeader {
    grid-template-rows: 3.5vh 1fr 3.5vh;
}

#presentationContent.smallHeader #presentationHeader {
    background-image: none;
}

#presentationContent.smallHeader #headerTtl,
#presentationContent.smallHeader #quizHeader {
    display: none;
}

#presentationHeader {
    background-color: var(--clr-primary-orange);
    color: #fff;
    font-family: var(--font-sassoon);
    font-size: 1.5rem;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    background-image: url(../images/bemfola-logo.png);
    background-repeat: no-repeat;
    background-position: right 3.125% center;
    background-size: auto 58%;
}

#presentationHeader.no-logo {
    background-image: none;
}

#quizHeader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

#quizHeader>div {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background-color: var(--clr-primary-orange);
}

#presentationFooter {
    background-color: var(--clr-primary-orange);
}

.pt-perspective {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 1200px;
    transform-style: preserve-3d;
}

.pt-page {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    /* visibility: hidden; */
    /* backface-visibility: hidden; */
    /* transform: translate3d(0, 0, 0); */
    /* opacity: 0; */
    /* transition: opacity .3s ease-in-out; */
    display: none;
}

.pt-page-current {
    /* visibility: visible; */
    /* opacity: 1; */
    /* z-index: 1; */
    display: block;
}

#sIntro {
    background-color: var(--clr-bg-turquoise);
}

.bubble {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: floatBubble 7s ease-in-out infinite
}

#sIntro .bubble:nth-child(1) {
    width: 116vmin;
    height: 116vmin;
    top: 10.87vmin;
    left: -52vmin;
    background: rgba(111, 183, 197, 0.10);
    box-shadow: 0px .5215vmin 6.4814vmin 2.7379vmin rgba(0, 105, 127, 0.17);
}

#leftApp.top-menu-active .bubble:nth-child(1) {
    left: -33vmin;
}

#sIntro .bubble:nth-child(2) {
    width: 76vmin;
    height: 76vmin;
    top: -34vmin;
    right: -4vmin;
    background: rgba(0, 104, 129, 0.10);
    box-shadow: 0px .5215vmin 6.4814vmin 2.7379vmin rgba(255, 255, 255, 0.10);
    animation-delay: -4s;
}

#presentationIntro .bubble:nth-child(1) {
    width: 65vw;
    height: 65vw;
    bottom: -34%;
    left: -3.18%;
    background: rgba(111, 183, 197, 0.10);
    box-shadow: 0px .5215vmin 6.4814vmin 2.7379vmin rgba(255, 255, 255, 0.17);
    animation-delay: -2s;
}

#presentationIntro .bubble:nth-child(2) {
    width: 76vmin;
    height: 76vmin;
    bottom: -30%;
    right: 10vmin;
    background: rgba(0, 104, 129, 0.10);
    box-shadow: 0px .5215vmin 6.4814vmin 2.7379vmin rgba(255, 255, 255, 0.10);
    animation-delay: -4s;
}

#presentationIntro .bubble:nth-child(3) {
    width: 46vmin;
    height: 46vmin;
    top: -34%;
    left: 30vmin;
    background: rgba(111, 183, 197, 0.10);
    box-shadow: 0px .5215vmin 6.4814vmin 2.7379vmin rgba(0, 105, 127, 0.17);
}

@keyframes floatBubble {
    0%, 100% {
        transform: translateY(-5%);
    }

    50% {
        transform: translateY(7%);
    }
}

#pfDiv3 {
    display: flex;
    align-items: center;
    justify-content: center;
}

#group19 .ellipse {
    width: 18.12vmin;
    height: 18.12vmin;
    margin: 17px;
    border-radius: 50%;
    background: #FFF;
    display: inline-block;
    animation: bounce 5s infinite;
    animation-delay: 300ms;
}

#group19 .ellipse:nth-child(1) {
    opacity: 0.1;
    animation-delay: 60ms;
}

#group19 .ellipse:nth-child(2) {
    opacity: 0.3;
    animation-delay: 120ms;
}

#group19 .ellipse:nth-child(3) {
    opacity: 0.4;
    animation-delay: 180ms;
}

#group19 .ellipse:nth-child(4) {
    opacity: 0.7;
    animation-delay: 240ms;
}

@keyframes bounce {
    0% {
        transform: none
    }

    25% {
        transform: translateY(-8vmin)
    }

    50% {
        transform: translateY(0) rotateX(180deg) rotateY(-180deg)
    }

    100% {
        transform: translateY(0) rotateX(180deg) rotateY(-180deg)
    }
}

#screensaverLeftTtl {
    font-size: 4.75rem;
    line-height: 1.4;
    top: 29.16%
}

#screensaverLeftTtl.hide {
    animation: hideLeftTtl .3s ease-out forwards;
}

#screensaverLeftSubTtl.hide {
    animation: hideLeftSbTtl .3s ease-out forwards;
}

@keyframes hideLeftTtl {
    to {
        opacity: 0;
        transform: translateY(-30vh) scale(.3);
        visibility: hidden;
    }
}

@keyframes hideLeftSbTtl {
    to {
        opacity: 0;
        transform: translateY(-40vh) scale(.3);
        visibility: hidden;
    }
}


#screensaverLeftSubTtl {
    font-size: 1.8rem;
    line-height: 1.4;
    top: 72%
}

#screensaverFigure {
    height: 66.25vh;
    bottom: 0;
    left: 0;
    transition-property: opacity, transform;
    transition-duration: 1s
}

#topMenu,
#bottomMenu {
    position: fixed;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: start;
    transition-property: opacity, transform;
    transition-duration: 1s;
    transform: translateX(-100%);
    opacity: 0;
}

#topMenu {
    top: 9.35vmin;
    font-size: .8215rem;
}

#bottomMenu {
    bottom: 3.26vmin;
    font-size: 1rem;
}

.main-nav-btn {
    cursor: pointer;
    background-color: #fff;
    color: var(--clr-turquoise-md);
    font-family: var(--font-futura);
    font-weight: 600;
    line-height: normal;
    text-decoration: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 1em;
    border-top-right-radius: 50em;
    border-bottom-right-radius: 50em;
    padding: 0 max(12px, 3.13vmin);
    height: 10.65vmin;
    min-width: 23.14vmin;
    transition: all .1s ease-in-out;
}

.main-nav-btn:not(:last-child) {
    margin-bottom: max(2vmin, 16px);
}

.main-nav-btn.active {
    font-weight: 700;
    background-color: var(--clr-primary-turquoise);
    color: #fff;
}

.top-menu-active #topMenu,
#mainSection.pt-page-current~#bottomMenu {
    opacity: 1;
    transform: translateX(0)
}

#presentationContent .pt-page {
    background-color: #fff;
}

#leftMenu {
    position: fixed;
    bottom: 0;
    right: 4.45vmin;
    display: flex;
    align-items: flex-end;
}

.left-nav-btn {
    display: block;
    border-top-left-radius: 3.93vmin;
    border-top-right-radius: 3.93vmin;
    text-align: center;
    font-size: .75rem;
    font-family: var(--font-futura);
    font-weight: 700;
    line-height: normal;
    text-decoration: none;
    border: none;
    color: var(--clr-primary-turquoise);
    background-color: #fff;
    min-height: 6.75vmin;
    width: 26vmin;
    padding: .8rem;
    transition: .3s ease-in-out;
}

#presentationIntro.pageFlip~#leftMenu>.left-nav-btn {
    color: #fff;
    background-color: var(--clr-turquoise-md);
}

#presentationIntro.pageFlip~#leftMenu>#btnSave {
    background-color: var(--clr-primary-turquoise);
}

.left-nav-btn:not(:first-child) {
    margin-left: max(2vmin, 16px);
}

.left-nav-btn.active,
#presentationIntro.pageFlip~#leftMenu>.left-nav-btn.active {
    background-color: var(--clr-primary-turquoise);
    color: #fff
}

.left-nav-btn.unselected,
#presentationIntro.pageFlip~#leftMenu>.left-nav-btn.unselected {
    background-color: var(--clr-secondary-light-turquoise);
    color: var(--clr-primary-turquoise)
}

#btnSave {
    width: 10.41vmin;
    min-height: 15vmin;
    font-family: var(--font-futura);
    font-weight: 600;
    font-size: .8rem;
    border-top-left-radius: 50em;
    border-top-right-radius: 50em;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all .3s ease-in-out;
    background-color: var(--clr-primary-turquoise);
}

#leftApp .has-save #btnSave {
    display: block;
}

#btnSave .icon {
    margin-bottom: .4rem;
    width: 1.6rem;
}

#btnRestart .icon {
    width: 1.2rem;
}

#btnRealWorldEvidence .icon {
    width: 1.44rem;
}

#btnRequestInfo .icon {
    margin-left: 1em;
    margin-right: .45em;
    width: 1.65rem;
    fill: currentColor;
}

#btnRequestInfo .pop,
#btnSave .pop {
    background-color: var(--clr-orange-600);
    padding: .8rem .75rem;
    box-shadow: -11.265px 11.265px 21.684px 0px rgba(0, 0, 0, 0.25);
}

#btnRequestInfo .pop {
    border-top-left-radius: 50rem;
    bottom: 70%;
    left: 84%;
    width: 27vmin;
}

#btnSave .pop {
    border-top-right-radius: 50rem;
    bottom: 82%;
    right: 75%;
    width: 22vmin;
}

#cartItemsCounter {
    font-family: var(--font-futura);
    font-weight: 700;
    margin-left: -1em;
}

.quiz-title {
    position: absolute;
    left: 0;
    top: 6.75vmin;
    width: 100%;
    text-align: center;
    font-family: var(--font-futura);
    font-weight: 500;
    font-size: 2.41rem;
    color: #fff;
    line-height: 1.2;
}

.quiz-bubble-wrap {
    position: absolute;
    transform: translate(-50%, -50%);
    visibility: hidden;
}

.quiz-bubble {
    width: 34.25vmin;
    height: 34.25vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--clr-primary-orange);
    border-radius: 50%;
    color: #fff;
    font-family: var(--font-sassoon);
    font-size: 2.01rem;
    line-height: 1.4;
    text-decoration: none;
    transition: all .3s ease-in-out;
    box-shadow: 0px 0px 62.801px -5.632px rgba(0, 105, 127, 0.60);
}

.quiz-bubble.small {
    width: 28.84vmin;
    height: 28.84vmin;
    font-size: 1.76rem;
}

.quiz-bubble.unselected {
    background-color: #FFBB75;
    color: var(--clr-primary-orange)
}

#efficacyBtn,
#preciseBtn {
    top: 56%;
    left: 36%;
}

#effectivnessBtn,
#accurateBtn {
    top: 56%;
    left: 64%;
}

#applesAndOrangesBtn,
#biaseBtn,
#cardsTowerBtn {
    top: 47.24%;
}

#applesAndOrangesBtn {
    left: 30%;
}

#biaseBtn {
    left: 50%;
}

#cardsTowerBtn {
    left: 70%;
}

#efficacyBtn .quiz-bubble.unselected,
#effectivnessBtn .quiz-bubble.unselected,
#preciseBtn .quiz-bubble.unselected,
#accurateBtn .quiz-bubble.unselected {
    scale: .81;
}

#efficacyBtn .quiz-bubble.selected,
#effectivnessBtn .quiz-bubble.selected,
#preciseBtn .quiz-bubble.selected,
#accurateBtn .quiz-bubble.selected {
    scale: 1.137;
}

.quiz-bubble-wrap.show {
    animation: showQuizBubble .5s ease-out forwards;
}

@keyframes showQuizBubble {
    from {
        /* left: 50%;
        top: 100%; */
        opacity: 0;
        transform: translate(-50%, -50%) rotateY(180deg);
        visibility: visible;
    }

    to {
        visibility: visible;
    }
}

.quiz-bubble-wrap.hide {
    animation: hideQuizBubble .5s ease-out forwards;
}

@keyframes hideQuizBubble {
    to {
        opacity: 0;
        transform: translate(-50%, -50%) rotateY(-180deg);
        visibility: hidden;
    }
}

#exploreBtn {
    width: 26.2vmin;
    height: 13.1vmin;
    display: block;
    padding-top: 2rem;
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    transition: all .1s ease-in-out;
    text-align: center;
    border-top-left-radius: 50em;
    border-top-right-radius: 50em;
    border: none;
    font-family: var(--font-futura);
    font-weight: 500;
    font-size: 1.6rem;
    text-decoration: none;
    background-color: var(--clr-primary-orange);
    color: #fff;
    box-shadow: 0px -0.251rem .533rem -2.816px rgba(0, 72, 87, 0.60);
}

.top-menu-active #exploreBtn {
    background-color: #fff;
    color: #238195;
    box-shadow: 0px 0px 29.851px -2.816px rgba(0, 72, 87, 0.20);
}

#exploreBtn.unavailable {
    background-color: #6CACBA;
    color: #BEDAE0;
}

.top-menu-active #screensaverFigure {
    opacity: 0;
    transform: translateX(-100%)
}

#presentationBtn {
    position: fixed;
    top: 5vmin;
    right: 5vmin;

    width: max(56px, 5vmin);
    height: max(56px, 5vmin);
    padding: max(10px, 1.25vmin);

    border-radius: 50%;
    background-color: var(--clr-primary-orange);
    color: #fff;
    border: none;
    transition: all .1s ease-in-out;
}

#presentationBtn:hover {
    background-color: var(--clr-orange-600);
}

#presentationBtn,
#leftMenu,
#topMenu,
#bottomMenu {
    z-index: 99;
}

div.mlkeyboard {
    z-index: 100;
}

/* page flip */
#pfDiv2 {
    position: absolute;
    width: 100%;
    height: 200%;
    right: 100%;
    transform: translate(94.5%, -20%) rotate(-30deg);
    transition: 0.75s ease-in-out;
    overflow: hidden;
}

#pfDiv3 {
    width: 101vw;
    height: 100vh;
    position: absolute;
    background: #278497;
    transition: 0.75s ease-in-out;
    transform: rotate(30deg) translate(19.1%, 33.8%);
    /*19.15 vw, 33 vh */
}

#pfDiv4 {
    position: absolute;
    width: 100vw;
    height: 130vh;
    transform-origin: 0 0;
    transition: 0.75s ease-in-out;
    background: #A6C9CF;
    transform: translate(85%, 75%) rotate(-30deg);
    box-shadow: 0 0 11px rgba(0, 0, 0, .5);
}

#pfPageShadow {
    position: absolute;
    width: 10vw;
    height: 200%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
    transition: 0.75s ease-in-out;
    transform: translate(93.8vw, -20%) rotate(-30deg) translate(8vw, 0);
}

#presentationIntro.pageFlip #pfDiv2 {
    transform: rotate(0deg);
}

#presentationIntro.pageFlip #pfDiv3 {
    transform: rotate(0deg) translate(100%, 0);
}

#presentationIntro.pageFlip #pfDiv4 {
    transform: translate(0, 0) rotate(0deg);
}

#presentationIntro.pageFlip #pfPageShadow {
    width: 2.75vmin;
    transform: translate(0, 0) rotate(0deg);
}

/* modals */
.g-modal {
    display: none;
    position: fixed;
    z-index: 90;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.30);
    backdrop-filter: blur(17px);
    transition: opacity .15s linear;
}

.g-modal.show {
    display: block;
}

.g-modal:not(.show) {
    opacity: 0;
}

.g-modal-dialog {
    position: absolute;
    background-color: #F8F8F8;
    border-radius: .8rem;
    box-shadow: 0px 4px 21.6px 2px rgba(0, 0, 0, 0.25);
    background-clip: padding-box;
    outline: 0;
    overflow: hidden;
}

.g-modal-content {
    position: relative;
    width: 100%;
    height: 100%;
    animation-name: modalAnim;
    animation-duration: .3s;
}

.g-modal-header {
    font-family: var(--font-sassoon);
    font-size: 1.7rem;
    font-weight: 400;
    line-height: normal;
    color: #fff;
    text-align: center;
    background-color: var(--clr-primary-orange);
    height: 12vmin;
    display: flex;
    align-items: center;
    justify-content: center;
}

.g-modal-body {
    padding: max(12px, 1.85vmin);
}

@keyframes modalAnim {
    from {
        top: -5vmin;
        opacity: 0;
    }

    to {
        top: 0;
        opacity: 1;
    }
}

#smpcModal .g-modal-dialog {
    top: 4.67vmin;
    right: 4.45vmin;
    bottom: 10vmin;
    width: calc(52vmin + max(2vmin, 16px));
}

#prescribingInfoModal .g-modal-dialog {
    top: 4.67vmin;
    right: 4.45vmin;
    bottom: 10vmin;
    width: 71%;
}

.g-modal .close {
    position: absolute;
    bottom: max(12px, 1vmin);
    right: max(12px, 1.85vmin);
}

.g-modal .close .icon {
    width: 4vmin;
    height: 4vmin;
}

#insights {
    position: absolute;
    top: 67.87vmin;
    left: 31.34vmin;
    height: 13vmin;
    border-radius: 50em;
    background: var(--clr-primary-turquoise);
    box-shadow: -11.265px 11.265px 21.684px 0px rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 1.6rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: flex;
    align-items: center;
    line-height: normal;
}

#insights div {
    padding-left: .5rem;
}

#insights .icon {
    width: 7.91vmin;
}

.reff {
    font-family: var(--font-sassoon);
    font-size: 0.4285rem;
}

.text-turqouise {
    color: var(--clr-primary-turquoise);
}

#mainSection {
    background-color: var(--clr-bg-turquoise);
}

#mainSection>div {
    clip-path: circle(59.5% at 67.76% 48%);
    padding-left: 30%;
    padding-top: 9vmin;
    background-color: rgba(255, 255, 255, 0.90);
    box-shadow: 0px .5215vmin 6.4814vmin 2.7379vmin rgba(0, 105, 127, 0.17);
}

#efficient-or-effective {
    padding: 9.15vmin 13% 0 13%;
}

.img-exp {
    width: 34.64vmin;
}

.fs-075 {
    font-size: .75rem;
}

.fs-08 {
    font-size: .8rem;
}

.fs-04 {
    font-size: .4rem;
}

.fs-1-2 {
    font-size: 1.2rem;
}

.fs-1-3 {
    font-size: 1.3rem;
}

.fs-1-5 {
    font-size: 1.5rem;
}

.fs-1-6 {
    font-size: 1.6rem;
}

.mb-0625 {
    margin-bottom: 0.625rem;
}

#efficient-or-effective .chart {
    width: 10.46vw;
    margin-top: 7.5vmin;
}

.anim-c-cnt {
    position: absolute;
    top: -11%;
    left: -11%;
    width: 122%;
    pointer-events: none;
    display: none;
}

.is-selected>.anim-c-cnt,
.has-animation>.anim-c-cnt {
    display: block;
    animation: rota 6s linear infinite reverse;
}

@keyframes rota {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*
.anim-c-cnt>path {
    transform-origin: center;
}
.anim-c-cnt .anim-c1,
.anim-c-cnt .anim-c2,
.anim-c-cnt .anim-c3 {
    animation: rota 5s linear infinite reverse;
}

.anim-c-cnt .anim-c4,
.anim-c-cnt .anim-c5 {
    animation: rota 4.5s linear infinite reverse;
}

.anim-c-cnt .anim-c6 {
    animation: rota 5.2s linear infinite reverse;
}*/

#precise-or-accurate {
    padding-top: 4.3vmin;
}

#precise-or-accurate .target {
    width: 27.55vw;
}

#precise-or-accurate .target-circles {
    position: absolute;
    width: 18.9vw;
    top: 10%;
    left: 10%;
}

#preciseItem .bullet-holes {
    position: absolute;
    width: 15vmin;
    transform: translate(-50%, -50%);
    top: 46%;
    left: 32%;
}

#accurateItem .bullet-holes {
    position: absolute;
    width: 34vmin;
    top: 50%;
    left: 52%;
    transform: translate(-50%, -50%);
}

#precise-or-accurate .anim-c-cnt {
    width: 85%;
    top: 7.5%;
    left: 7.5%;
}

#precise-or-accurate .reff {
    padding-left: 13%;
}

#meta-analysis {
    padding: 8.42vmin 13% 0 13%;
}

#meta-analysis .anim-c-cnt {
    width: 124%;
    left: -12%;
    top: -12%;
}

#meta-analysis .flip-card {
    width: 17.5vw;
    height: 17.5vw;
    perspective: 52.5vw;
}

.flip-card .front,
.flip-card .back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 1s ease;
    backface-visibility: hidden;
}

.flip-card .front {
    transform: rotateY(0deg);
}

.flip-card.is-selected .front {
    transform: rotateY(-180deg);
}

.flip-card .back {
    transform: rotateY(180deg);
}

.flip-card.is-selected .back {
    transform: rotateY(0deg);
}

.flip-card .back {
    background-color: var(--clr-primary-turquoise);
    color: #fff;
    font-size: .875rem;
}

.main-ttl {
    font-size: 2.41rem;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: .75rem;
    color: var(--clr-primary-turquoise);
}

.swiper {
    --swiper-navigation-color: var(--clr-primary-turquoise);
    --swiper-navigation-size: max(44px, 4vmin);
    --swiper-navigation-sides-offset: max(10px, 4.45vmin);
}

.swiper-button-next,
.swiper-button-prev {
    font-weight: 600;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: 0;
}

.prod-img-wrapper {
    margin-top: .825rem;
    margin-bottom: .6rem;
    text-align: center;
}

.prod-img-wrapper img {
    width: 65.88vw;
}

.prod-img-wrapper+.reff {
    padding: 0 13%;
}

.two-tones-bg {
    background: linear-gradient(to right, #E6F1F3 50%, #fff 50%);
}

.two-tones-bg-2 {
    background: linear-gradient(to right, #E6F1F3 40%, #fff 40%);
}

.anim-c-cnt.france-r3 {
    width: 34%;
    top: 19.2%;
    left: 33.3%;
}

.page-ttl {
    font-size: 2.41rem;
    color: var(--clr-primary-turquoise);
}

#request .page-ttl {
    margin-top: 4.6vmin;
    padding-left: 15vw;
    padding-right: 15vw;
}

#request .swiper {
    height: 74vh;
    padding-top: 4vmin;
    padding-left: 15vw;
    padding-right: 7vw;
}

#request .cart-item-header {
    background-color: var(--clr-primary-orange);
    background-image: url(../images/bemfola-logo.png);
    background-repeat: no-repeat;
    background-position: right 3.125% center;
    background-size: auto 50%;
    color: #fff;
    font-family: var(--font-sassoon);
    font-size: .5rem;
    padding-left: max(8px, 1vmin);
    padding-right: max(8px, 1vmin);
    padding-right: 20%;
    display: flex;
    align-items: center;
    justify-content: start;
    height: 6vmin;
    overflow: hidden;
}

.remove-from-cart {
    position: absolute;
    top: 0;
    left: 100%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    width: 1.35rem;
    height: 1.35rem;
    background-color: #E7E7E7;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" fill="%23238195"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 48%;
    box-shadow: 5.632px 5.632px 22.529px 0px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
}

#emptyOkCartIcon .icon {
    width: 11.71vmin;
}

a.map-nav {
    text-decoration: none;
    display: inline-block;
    text-align: center;
    min-width: 8vmin;
    padding: .25rem .7rem;
    margin-right: .5rem;
    background-color: var(--clr-orange-200);
    color: var(--clr-primary-orange);
    transition: all .3s ease-in-out;
}

a.map-nav.active {
    background-color: var(--clr-primary-orange);
    color: #fff;
    font-weight: 500;
}

.main-map-reff {
    bottom: 7vmin;
    right: 5vmin;
}

.eoc-reff {
    bottom: 4.3vmin;
    right: 5vw;
}

#mapspain,
#mapfrance,
#mapgermanandaustria {
    padding-top: 10.7vmin;
    display: none;
}

#rws.mapspain #mapspain,
#rws.mapfrance #mapfrance,
#rws.mapgermanandaustria #mapgermanandaustria {
    display: block;
}

#map {
    background-color: #e9f2f4;
}

#back-mm-icon {
    display: none;
    height: .6rem;
    margin-right: .5rem;
}

#rws.mapspain #back-mm-icon,
#rws.mapfrance #back-mm-icon,
#rws.mapgermanandaustria #back-mm-icon {
    display: inline-block;
}

#mapspain .reff,
#mapfrance .reff,
#mapgermanandaustria .reff {
    position: absolute;
    right: 16.5vw;
    bottom: 4.3vh;
}

.btn-ce {
    display: flex;
    align-items: center;
}

.btn-ce.active {
    align-items: flex-start;
}

.btn-ce-icon {
    width: 16vmin;
    height: 16vmin;
    background-color: #fff;
    color: var(--clr-primary-orange);
    box-shadow: -8.824px 8.824px 16.985px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 2vmin;
    border-radius: 50%;
    margin-bottom: 3.1vmin;
    transition: all .5s ease-in-out;
    transform-origin: center;
}

.btn-ce.active .btn-ce-icon {
    width: 20vmin;
    height: 20vmin;
    background-color: var(--clr-primary-orange);
    color: #fff;
    box-shadow: 2.816px 11.265px 38.863px 0px rgba(121, 70, 18, 0.67) inset;
}

.btn-ce-icon svg {
    width: 51%;
}

.btn-ce-ttl {
    font-size: 1.4rem;
    line-height: 1.2;
    font-family: var(--font-sassoon);
    max-width: 17.6vmin;
    color: var(--clr-primary-turquoise);
}

.btn-ce.active .btn-ce-ttl {
    max-width: none;
    margin-bottom: 1.01vmin;
}

.btn-ce .nav-eff {
    color: var(--clr-primary-turquoise);
    background: #fff;
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: .375rem;
    border-color: var(--clr-primary-turquoise);
    border-width: 4px;
    --bs-btn-padding-y: 0.3rem;
}

.btn-ce .nav-eff.active {
    background-color: var(--clr-primary-turquoise);
    color: #fff;
    /* font-weight: 700; */
}

.ce-desc,
.nav-eff {
    display: none;
}

.btn-ce.active .ce-desc {
    display: block;
}

.btn-ce.active .nav-eff {
    display: inline-block;
}

#reqDetailsForm {
    width: 54vw;
}

#reqDetailsForm .form-floating-cnt {
    position: relative;
}

#reqDetailsForm .form-control {
    border-radius: 0;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-bottom: 2px solid var(--clr-turquoise-md);
    background-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

#reqDetailsForm .form-control.is-invalid,
#reqDetailsForm.was-validated .form-control:invalid {
    border-color: var(--bs-form-invalid-color);
    /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important */
}

#reqDetailsForm .form-control.is-valid,
#reqDetailsForm.was-validated .form-control:valid,
#reqDetailsForm .form-control.is-invalid,
#reqDetailsForm.was-validated .form-control:invalid {
    background-image: none;
}

#reqDetailsForm .form-floating-cnt .form-control {
    outline: none;
    box-shadow: none;
    padding-top: .2rem;
    padding-bottom: .2rem;
}

#reqDetailsForm .form-floating-cnt .form-control::-webkit-input-placeholder {
    opacity: 0;
    color: transparent;
}

#reqDetailsForm textarea {
    height: 23vmin;
    resize: none;
}

.form-floating-cnt>.form-control:focus~label::after,
.form-floating-cnt>.form-control:not(:placeholder-shown)~label::after {
    background-color: transparent;
}

#reqDetailsForm label {
    color: #6CACBA;
}

.form-floating-cnt label {
    padding-left: 0;
    padding-right: 0;
}

#reqDetailsForm label .accent {
    color: #6CACBA;
}

#reqDetailsForm .form-floating-cnt>label {
    position: absolute;
    top: .25rem;
    left: 0;
    transition: all 200ms;
    pointer-events: none;
    padding-bottom: .25rem;
    font-weight: 500;
}

.form-floating-cnt>.form-control-plaintext~label,
.form-floating-cnt>.form-control:focus~label,
.form-floating-cnt>.form-control:not(:placeholder-shown)~label,
.form-floating-cnt>.form-select~label {
    /* font-size: .75rem; */
    /* transform: translateY(-100%); */
    /* color: rgba(var(--bs-body-color-rgb),.65); */
    transform: scale(.8) translateY(calc(-100% - 2px)) translateX(-12%);
}

#reqDetailsForm .bar::before,
#reqDetailsForm .bar::after {
    content: "";
    position: absolute;
    bottom: 0;
    background: var(--clr-primary-turquoise);
    width: 0;
    height: 3px;
    transition: 0.2s ease;
}

#reqDetailsForm .bar::before {
    left: 50%;
}

#reqDetailsForm .bar::after {
    right: 50%;
}

#reqDetailsForm input:focus~.bar::before,
#reqDetailsForm input:focus~.bar::after,
#reqDetailsForm textarea:focus~.bar::before,
#reqDetailsForm textarea:focus~.bar::after {
    width: 50%;
}

#reqDetailsForm .form-control.is-invalid~.bar::before,
#reqDetailsForm .form-control.is-invalid~.bar::after {
    background: var(--bs-form-invalid-color);
}

#reqUserAgreement:checked {
    background-color: var(--clr-primary-orange);
    border-color: var(--clr-primary-orange);
}

#reqUserAgreement {
    font-size: 1.5rem;
    margin-top: .15em;
    margin-left: -1em;
    --bs-border-color: var(--clr-primary-orange);
    --bs-border-width: max(3px, .12rem);
    border-radius: .2em;
    background-color: transparent;
}

#reqUserAgreement>.row {
    --bs-gutter-x: 1.75rem;
}

#reqUserAgreement+label {
    color: var(--body-color);
    font-size: .65rem;
    padding-left: .5rem;
}

.btn-submit {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--clr-primary-orange);
    --bs-btn-border-color: var(--clr-primary-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--clr-orange-600);
    --bs-btn-hover-border-color: var(--clr-orange-600);
    --bs-btn-focus-shadow-rgb: 239, 124, 1;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--clr-orange-600);
    --bs-btn-active-border-color: var(--clr-orange-600);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--clr-orange-400);
    --bs-btn-disabled-border-color: var(--clr-orange-400);
    font-weight: 700;
    min-width: 23vmin;
}

#requestSuccess {
    background: rgba(180, 211, 216, 0.61);
    backdrop-filter: blur(24.923078536987305px);
    padding-left: 34%;
    padding-bottom: 5vmin;
}

#confirmationMsgCnt {
    width: 71.43vmin;
    height: 71.43vmin;
    padding: 8.88vmin 6.71vmin;
}

.confirm-icon {
    width: 7.91vmin;
}