.elementor-501 .elementor-element.elementor-element-c6fb15c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-501 .elementor-element.elementor-element-fb25319{--spacer-size:40px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-501 .elementor-element.elementor-element-60fdb2d{text-align:center;}.elementor-501 .elementor-element.elementor-element-60fdb2d .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:34px;font-weight:600;color:#000000;}.elementor-501 .elementor-element.elementor-element-d46169c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-501 .elementor-element.elementor-element-d52731f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:100px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-501 .elementor-element.elementor-element-3035b8b{padding:0px 0px 20px 0px;}.elementor-501 .elementor-element.elementor-element-3035b8b .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:42px;font-weight:600;text-transform:capitalize;letter-spacing:0.2px;color:#083389;}.elementor-501 .elementor-element.elementor-element-5686cbb .wd-accordion.wd-style-shadow > .wd-accordion-item{background-color:#FFFFFF;}.elementor-501 .elementor-element.elementor-element-5686cbb .wd-accordion-title-text{font-family:"Lato", Sans-serif;font-size:17px;text-transform:capitalize;letter-spacing:0.2px;}.elementor-501 .elementor-element.elementor-element-5686cbb .wd-accordion-content{font-family:"Lato", Sans-serif;font-size:15px;text-transform:capitalize;letter-spacing:0.2px;color:#000000;}.elementor-501 .elementor-element.elementor-element-5686cbb > div > .wd-accordion > .wd-accordion-item > .wd-accordion-title > .wd-accordion-opener{font-size:15px;}.elementor-501 .elementor-element.elementor-element-3a3434d{--display:flex;}.elementor-501 .elementor-element.elementor-element-5637c24{--spacer-size:100px;}.elementor-501 .elementor-element.elementor-element-1d6278e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-501 .elementor-element.elementor-element-1d6278e:not(.elementor-motion-effects-element-type-background), .elementor-501 .elementor-element.elementor-element-1d6278e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F4F4F4;}.elementor-501 .elementor-element.elementor-element-18abe3e .wd-products-with-bg, .elementor-501 .elementor-element.elementor-element-18abe3e .wd-products-with-bg .wd-product{--wd-prod-bg:#FFFFFF;--wd-bordered-bg:#FFFFFF;}.elementor-501 .elementor-element.elementor-element-18abe3e .wd-el-title{color:#000000;font-family:"Lato", Sans-serif;font-size:17px;letter-spacing:0.2px;}@media(min-width:768px){.elementor-501 .elementor-element.elementor-element-d52731f{--content-width:1200px;}.elementor-501 .elementor-element.elementor-element-1d6278e{--content-width:1382px;}}@media(max-width:767px){.elementor-501 .elementor-element.elementor-element-fb25319{--spacer-size:1px;}.elementor-501 .elementor-element.elementor-element-60fdb2d .elementor-heading-title{font-size:24px;}.elementor-501 .elementor-element.elementor-element-d52731f{--padding-top:50px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-501 .elementor-element.elementor-element-3035b8b .elementor-heading-title{font-size:37px;}}/* Start custom CSS for html, class: .elementor-element-9a8ee45 *//* ===============================
   PEPTIDE CALCULATOR
=================================*/

#peptide-calculator{
    max-width:1200px;
    margin:auto;
    background:#f5f5f5;
    padding:30px;
    border-radius:12px;
    font-family:Arial,Helvetica,sans-serif;
    box-sizing:border-box;
}

#peptide-calculator *,
#peptide-calculator *:before,
#peptide-calculator *:after{
    box-sizing:border-box;
}

#peptide-calculator h3{
    margin:0 0 15px;
    font-size:18px;
    font-weight:700;
    color:#111;
}

#peptide-calculator h3 span{
    color:#d60000;
}

/* ===============================
SYRINGE CARDS
=================================*/

.pc-syringe-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-bottom:35px;
}

.pc-card{

    background:#fff;
    border:2px solid #163b96;
    border-radius:8px;
    cursor:pointer;

    transition:.25s;

    text-align:center;

    padding:12px;

}

.pc-card img{

    width:100%;
    height:60px;
    object-fit:contain;

}

.pc-card div{

    margin-top:8px;
    font-weight:bold;
    font-size:15px;

}

.pc-card:hover{

transform:translateY(-3px);

box-shadow:0 10px 25px rgba(0,0,0,.10);

}

.pc-card.active{

background:#163b96;

color:#fff;

}


/* ===============================
3 COLUMNS
=================================*/

.pc-options{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

margin-bottom:30px;

}

/* ===============================
BUTTON GROUP
=================================*/

.btn-group{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:12px;

}

.btn-group button{

height:46px;

background:#fff;

border:2px solid #163b96;

border-radius:6px;

font-weight:700;

cursor:pointer;

transition:.25s;

font-size:14px;

}

.btn-group button:hover{

background:#163b96;

color:#fff;

}

.btn-group button.active{

background:#163b96;

color:#fff;

}

/* ===============================
RESULT
=================================*/

.pc-result{

margin:35px 0 25px;

font-size:22px;

font-weight:600;

}

.pc-result strong{

color:#000000;

}

/* ===============================
RULER
=================================*/

.pc-ruler{

position:relative;

height:90px;

border:3px solid #163b96;

border-radius:8px;

overflow:hidden;

background:white;

margin-top:35px;
background-size: contain;

}

#rulerSVG{

width:100%;

height:100%;

display:block;

}

#fill{

position:absolute;

left:0;

top:0;

height:100%;

width:0;

background:rgba(22,59,150,.12);

transition:.45s;

z-index:1;

}

#needle{

position:absolute;

top:0;

width:4px;

height:100%;

background:#0B2D83;

transition:left .5s cubic-bezier(.22,1,.36,1);

}

#needle:before{

content:"";

position:absolute;

top:0;

left:-5px;

width:14px;

height:14px;

background:#0B2D83;

border-radius:50%;

}
/* ===============================
TICKS
=================================*/

.ticks{

position:absolute;

left:0;

bottom:0;

width:100%;

height:100%;

display:flex;

align-items:flex-end;

}

.tick{

flex:1;

height:14px;

border-left:2px solid #222;

position:relative;

}

.tick.major{

height:28px;

}

.tick span{

position:absolute;

top:-22px;

left:-6px;

font-size:11px;

font-weight:bold;

}

/* ===============================
ANIMATIONS
=================================*/

.pc-card,
.btn-group button{

transition:

background .25s,

color .25s,

transform .25s,

box-shadow .25s;

}

.btn-group button:active{

transform:scale(.96);

}

.pc-card:active{

transform:scale(.98);

}

/* ===============================
RESPONSIVE
=================================*/

@media(max-width:992px){

.pc-options{

grid-template-columns:1fr;

}

.pc-syringe-grid{

grid-template-columns:1fr;

}

}

@media(max-width:600px){

#peptide-calculator{

padding:18px;

}

.btn-group{

grid-template-columns:1fr 1fr;

}

.pc-result{

font-size:18px;

}

}
.pc-card.active{

transform:translateY(-3px);

box-shadow:0 10px 25px rgba(22,59,150,.35);

}

.btn-group button.active{

transform:scale(1.03);

}

#needle{

transition:left .45s cubic-bezier(.22,1,.36,1);

}

#fill{

transition:width .45s cubic-bezier(.22,1,.36,1);

}/* End custom CSS */