@font-face {
    font-family: 'Apfel Grotezk';
    src: url("../otf/apfelgrotezk-regular.otf") format("opentype"),
        url('../woff/apfelgrotezk-regular.woff') format('woff');
    font-style: normal;
}
@font-face {
    font-family: 'Apfel Grotezk Fett';
    src: url('../otf/apfelgrotezk-fett.otf') format('opentype'),
        url('../woff/apfelgrotezk-fett.woff') format('woff');
    font-style: normal;
}
@font-face {
    font-family: 'Apfel Grotezk Brukt';
    src: url('../otf/apfelgrotezk-brukt.otf') format('opentype'),
        url('../woff/apfelgrotezk-brukt.woff') format('woff');
    font-style: normal;
}
html, body {
    width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    -webkit-font-smoothing: antialiased!important;
    scroll-behavior: smooth;
	margin: 0;
	padding: 0;
	background: #F8FAFF;
	background-color: #F8FAFF!important;
	overflow-x: hidden;
    font-family: "Work Sans"; 
    font-weight:400; 
    font-style:normal;
}
body * {
    -webkit-font-smoothing: antialiased!important;
}
.container {
	padding-left: 20px!important;
	padding-right: 20px!important;
}
* {
    box-sizing: border-box;
    font-family: "Work Sans";
    font-weight:400; 
    font-style:normal;
}
.fab, .fas, .fa, .fal {
	font-family: 'FontAwesome'!important;
	font-style: normal;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6,
.h1 *, .h2 *, .h3 *, .h4 *, .h5 *, .h6 *, h1 *, h2 *, h3 *, h4 *, h5 *, h6 *, .font-apfel-grotezk-fett {
	font-family: 'Apfel Grotezk Fett'!important;
}
p {
    line-height: 1.3;
    font-size: 18px;
}
.tooltip-inner { 
    background-color: #D8E2F3!important; 
    color: var(--color-darkblue)!important; 
    font-size: 12px;
    text-align: left!important;
}
.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, 
.tooltip.bs-tooltip-bottom .arrow::before {
    margin-left: -3px;
    content: "";
    border-width: 0 5px 5px;
    border-bottom-color: #D8E2F3;
}
.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, 
.tooltip.bs-tooltip-right .arrow::before {
    margin-top: -3px;
    content: "";
    border-width: 5px 5px 5px 0;
    border-right-color: #D8E2F3;
}
.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, 
.tooltip.bs-tooltip-top .arrow::before {
    margin-left: -3px;
    content: "";
    border-width: 5px 5px 0;
    border-top-color: #D8E2F3;
}
.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before, 
.tooltip.bs-tooltip-left .arrow::before {
    right: 0;
    margin-top: -3px;
    content: "";
    border-width: 5px 0 5px 5px;
    border-left-color: #D8E2F3;
}
.font-15, .font-15 * {
    font-size: 15px;
}
.page:not(.page-home){
    padding-top: 200px;
    /* padding-top: 270px; */
}
* html .clearfix {
    height: 1%;
    overflow: visible;
}
* + html .clearfix {
    min-height: 1%;
}
.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    font-size: 0;
}
a, .with-transition { 
	text-decoration: none !important; 
	-webkit-transition: .25s;
     -moz-transition: .25s;
     -ms-transition: .25s;
     -o-transition: .25s;
     transition: .25s
}
img {
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.clean-row{
	margin:0!important;
	padding: 0!important;
}
.clean-ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.unset, .unset:focus {
    outline: unset!important;
    box-shadow: unset!important;
    border-color: transparent!important;
}
.text-darkblue, .text-darkblue * {
	color: var(--color-darkblue);
}
.text-white, .text-white * {
	color: #fff;
}
.text-pink, .text-pink *, .text-pink:hover {
	color: var(--color-pink);
}
.text-aqua, .text-aqua * {
	color: var(--color-aqua);
}
.text-greypurple, .text-greypurple * {
	color: var(--color-greypurple);
}
.text-darkgreypurple, .text-darkgreypurple * {
	color: var(--color-darkgreypurple);
}
.text-underline {
    text-decoration: underline!important;
}
.link-pink, .link-pink:hover {
    color: var(--color-pink);
}
.nextline{
	display: block;
}
.font-apfel-regular, .cross-out-pricing-p, .cross-out-pricing-p *, .cross-out-pricing-span {
    font-family: 'Apfel Grotezk'!important;
}
.font-worksans {
    font-family: 'Work Sans'!important;
}
.text-height-0 {
    line-height: 1!important;
}
.text-height-1 {
    line-height: 1.5!important;
}
.text-height-2 {
    line-height: 2!important;
}
.text-height-3 {
    line-height: 2.5!important;
}
.text-height-4 {
    line-height: 3!important;
}
.text-height-5 {
    line-height: 3.5!important;
}
.bg-white { 
    background-color: #ffffff;
}
/* h2 {
	font-size: 64px;
	font-weight: 700;
} */
/* ====================== Buttons and Fills =========== */
.btn-radius {
	border-radius: 50px;
	padding: 8px 15px;
	min-width: 120px;
	font-size: 16px;
	text-align: center;
	display: inline-block;
	border: 1px solid transparent;
}
.ghost-button {
	color: var(--color-pink);
	border: 1px solid var(--color-pink)!important;
	border-radius: 50px;
}
.ghost-button:hover, .account-login a:first-child:hover {
	color: #fff;
	background-color: var(--color-pink);
}
 
.site-header.sticky .container .account-login a:first-child:hover {
    background: var(--color-pink)!important;
	color: #fff;
}
.blue-outline {
	color: #EBF1FB;
	-webkit-font-smoothing: antialiased;
    -webkit-text-stroke: 2px var(--color-darkblue);
}
.pink-outline {
	color: #EBF1FB;
	/* text-shadow: rgb(199, 80, 142) 2px 0px 0px, rgb(199, 80, 142) 1.75517px 0.958851px 0px, rgb(199, 80, 142) 1.0806px 1.68294px 0px, rgb(199, 80, 142) 0.141474px 1.99499px 0px, rgb(199, 80, 142) -0.832294px 1.81859px 0px, rgb(199, 80, 142) -1.60229px 1.19694px 0px, rgb(199, 80, 142) -1.97998px 0.28224px 0px, rgb(199, 80, 142) -1.87291px -0.701566px 0px, rgb(199, 80, 142) -1.30729px -1.5136px 0px, rgb(199, 80, 142) -0.421592px -1.95506px 0px, rgb(199, 80, 142) 0.567324px -1.91785px 0px, rgb(199, 80, 142) 1.41734px -1.41108px 0px, rgb(199, 80, 142) 1.92034px -0.558831px 0px; */
	/* text-shadow: rgb(199, 80, 142) 3px 0px 0px, rgb(199, 80, 142) 2.83487px 0.981584px 0px, rgb(199, 80, 142) 2.35766px 1.85511px 0px, rgb(199, 80, 142) 1.62091px 2.52441px 0px, rgb(199, 80, 142) 0.705713px 2.91581px 0px, rgb(199, 80, 142) -0.287171px 2.98622px 0px, rgb(199, 80, 142) -1.24844px 2.72789px 0px, rgb(199, 80, 142) -2.07227px 2.16926px 0px, rgb(199, 80, 142) -2.66798px 1.37182px 0px, rgb(199, 80, 142) -2.96998px 0.42336px 0px, rgb(199, 80, 142) -2.94502px -0.571704px 0px, rgb(199, 80, 142) -2.59586px -1.50383px 0px, rgb(199, 80, 142) -1.96093px -2.27041px 0px, rgb(199, 80, 142) -1.11013px -2.78704px 0px, rgb(199, 80, 142) -0.137119px -2.99686px 0px, rgb(199, 80, 142) 0.850987px -2.87677px 0px, rgb(199, 80, 142) 1.74541px -2.43999px 0px, rgb(199, 80, 142) 2.44769px -1.73459px 0px, rgb(199, 80, 142) 2.88051px -0.838247px 0px; */
	-webkit-font-smoothing: antialiased;
    -webkit-text-stroke: 2px var(--color-pink);
}

/* .pink-outline text{
	stroke-width : 0.5px;
} */
.pink-outline .blue-fill {
    -webkit-text-stroke: 1px var(--color-darkblue);
}
.blue-fill {
	color: var(--color-darkblue);
}
.btn-aqua {
	background-color: var(--color-aqua);
	color: var(--color-darkblue);
}
.btn-aqua:hover {
	color: var(--color-darkblue);
    -webkit-box-shadow: 0px 0px 15px var(--color-aqua);
	-moz-box-shadow: 0px 0px 15px var(--color-aqua);
	box-shadow: 0px 0px 15px var(--color-aqua);
}
.btn-aqua-light {
	background-color: #DFFFF1;
	color: var(--color-darkblue);
}
.btn-aqua-light:hover {
	color: var(--color-darkblue);
    -webkit-box-shadow: 0px 0px 15px #DFFFF1;
	-moz-box-shadow: 0px 0px 15px #DFFFF1;
	box-shadow: 0px 0px 15px #DFFFF1;
}
.btn-pink {
	background-color: var(--color-pink);
	color: #fff;
}
.btn-pink[disabled] {
    background-color: #CEACBE;
    color: #DFCCD3;
}
.btn-pink:hover, .account-login a:last-child:hover{
	color: #fff;
	-webkit-box-shadow: 0px 0px 15px var(--color-pink);
	-moz-box-shadow: 0px 0px 15px var(--color-pink);
	box-shadow: 0px 0px 15px var(--color-pink);
}
.btn-pink[disabled]:hover{
    box-shadow: unset;
    color: #DFCCD3;
}
.btn-pink-light {
	background-color: var(--color-pinklight);
	color: var(--color-pink);
}
.btn-pink-light[disabled] {
    background-color: #DFCCD3;
    color: #CEACBE;
}
.btn-pink-light:hover {
	color: var(--color-pink);
	-webkit-box-shadow: 0px 0px 15px var(--color-pinklight);
	-moz-box-shadow: 0px 0px 15px var(--color-pinklight);
	box-shadow: 0px 0px 15px var(--color-pinklight);
}
/* .account-login a:last-child:hover{
	color: white;
	-webkit-box-shadow: 0px 0px 15px var(--color-pinklight);
	-moz-box-shadow: 0px 0px 15px var(--color-pinklight);
	box-shadow: 0px 0px 15px var(--color-pinklight);
} */
.btn-pink-light[disabled]:hover{
    box-shadow: unset;
    color: #DFCCD3;
}
.circle-button-aqua {
	background-color: var(--color-aqua);
	color: var(--color-darkblue);
    height: 130px;
    width: 130px;
    border-radius: 100%;
    font-size: 25px;
    line-height: 1.2;
    text-align: center;
	padding: 36px 0px;
	transform: rotate(-11deg);
	-webkit-transition: .25s;
     -moz-transition: .25s;
     -ms-transition: .25s;
     -o-transition: .25s;
     transition: .25s;
	 display: inline-block;
}
.circle-button-aqua:hover {
	box-shadow: unset;
	transform: rotate(0deg);
	color: var(--color-darkblue);
	/* height: 145px;
    width: 145px; */
	/* padding: 43px 0px; */
    transform-origin: center;
    -webkit-box-shadow: 0px 0px 30px rgb(142 252 205 / 80%);
	-moz-box-shadow: 0px 0px 30px rgb(142 252 205 / 80%);
	box-shadow: 0px 0px 30px rgb(142 252 205 / 80%);
}
.p-masthead .pink-outline, .p-masthead .blue-outline {
	font-family: 'Apfel Grotezk Fett';
    font-size: 64px;
    width: 100%;
    overflow: visible;
    margin-bottom: -7px;
    line-height: 1;
}
.p-masthead .blue-fill {
    font-family: 'Apfel Grotezk Fett';
    font-size: 72px;
    line-height: 1;
}
.newline {
    display: block;
}
/* ====================== Others =========== */
label.small-title {
	font-size: 22px;
	letter-spacing: 2px;
}
.heading-h2 {
	/* font-weight: bold; */
    font-size: 65px;
    /* letter-spacing: 1px; */
    line-height: 1;
}
.image-cropper-circle {
	position: relative;
	overflow: hidden;
	border-radius: 50%;
}
.image-cropper-circle img {
	display: inline;
	margin: 0 auto;
	height: 100%;
	width: auto;
}
.sf-social-mobile li, .sf-social-mobile li a i {
	color: #fff;
	font-size: 20px;
}
.sf-social-mobile li a:hover i {
	color: var(--color-aqua);
}
.checklist li {
    list-style-type: none;
    position: relative;
    line-height: 1.3;
}

.checklist li:before {
    content: "";
    background-image: url('../png/ico-check.png');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    height: 24px;
    width: 24px;
    position: absolute;
    left: -40px;
/*    top: 11px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);*/
    top: 0;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);

}
.checklist.gray li:before {
    background-image: url('../svg/ico-check-gray.svg');
}
.pink-heading-small {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
}
.price-currency-small {
    font-size: 27px;
    margin-right: 5px;
}
.plan-columns {
    margin-top: 80px;
    margin-bottom: 40px;
}
.plan-columns p {
    font-size: 15px;
}
.plan-columns p a, .plan-columns p a:hover {
    color: var(--color-pink);
    font-weight: 600;
}
.plan-price {
    font-family: 'Apfel Grotezk Fett'!important;
    font-size: 60px !important;
    font-weight: bold;
    margin-bottom: 40px;
}
.plan-price span {
    font-family: 'Apfel Grotezk Fett'!important;
}
.monthly-sign {
    font-size: 20px;
    font-weight: 400;
    margin-left: 5px;
}
.switch-button {
    background: #fff;
    border-radius: 50px;
    overflow: hidden;
    width: 242px;
    text-align: center;
    font-size: 15px;
    letter-spacing: 1px;
    color: var(--color-darkblue);
    position: relative;
    padding-right: 120px;
    position: relative;
}
.switch-button.invert:before {
    color: #fff;
}
.switch-button.invert {
    background: rgba(255,255,255,0.3);
}
.switch-button:before {
    content: "Bill Yearly";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 4px;
    width: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    pointer-events: none;
}
.switch-button-checkbox {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2;
}
.switch-button-checkbox:checked + .switch-button-label:before {
    transform: translateX(115px);
    transition: transform 300ms linear;
}
.switch-button.invert .switch-button-checkbox:checked + .switch-button-label .switch-button-label-span {
    color: #fff;
}
.switch-button-checkbox + .switch-button-label {
    position: relative;
    padding: 5px;
    display: block;
    user-select: none;
    pointer-events: none;
    margin: 6px;
    width: 115px;
}
.switch-button-checkbox + .switch-button-label:before {
    content: "";
    background: var(--color-aqua);
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50px;
    transform: translateX(0);
    transition: transform 300ms;
}
.switch-button-checkbox + .switch-button-label .switch-button-label-span {
    position: relative;
}
.extend-container {
    width: calc(100% + 200px)!important;
    margin-left: -100px!important;
}
@media (min-width: 768px) AND (-moz-device-pixel-ratio: 1.20) {
    :root {
        zoom: .80;
      }
}
@media (min-width: 768px) AND (-webkit-device-pixel-ratio: 1.25) {
    :root {
        zoom: .80;
      }
}
@media (min-width: 768px) AND (-webkit-device-pixel-ratio: 1.5) {
    :root {
      zoom: .65;
    }
    .page.page-home .p-masthead .container > p {
        font-size: 20px;
        background: unset;
        box-shadow: unset;
    }
    .page.page-home .p-masthead p { 
        /*width: 455px;*/
    }

    .p-masthead{
        padding-top: 180px!important;
    }

    .p-masthead a:not(.circle-button-aqua){
        font-size: 16px!important;

    }

    .ph-problems{
        padding-top: 75px!important;
    }

}
.mobile-menu .table td {
    border-top: none;
    text-align: center;
}
.mobile-menu .table tr:last-child td {
    border-bottom: 1px solid #dee2e6;
}
.cross-out-masthead::after {
    position: absolute;
    content: '';
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--color-darkblue);
    transform: rotate(170deg);
}
.cross-out {
    font-size: 30px!important;
}
.cross-out::after  {
    position: absolute;
    content: '';
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-pink);
    transform: rotate(170deg);
}
.pricing-float-line {
    position: absolute;
    bottom: 25px;
    left: -100px;
}
.cross-out-pricing-p span:first-child,
.cross-out-pricing-p span:last-child {
    font-size: 20px;
}
.cross-out-pricing-span {
    background: var(--color-greypurple);
    font-size: 9px!important;
    border-radius: 15px;
    letter-spacing: 1px;
    padding: 5px 10px;
}

/* CHEATSHEAT */
/**
Show/hide for breakpoint and down:
	hidden-xs-down (hidden-xs) = d-none d-sm-block
	hidden-sm-down (hidden-sm hidden-xs) = d-none d-md-block
	hidden-md-down (hidden-md hidden-sm hidden-xs) = d-none d-lg-block
	hidden-lg-down = d-none d-xl-block
	hidden-xl-down (n/a 3.x) = d-none (same as hidden)
Show/hide for breakpoint and up:
	hidden-xs-up = d-none (same as hidden)
	hidden-sm-up = d-sm-none
	hidden-md-up = d-md-none
	hidden-lg-up = d-lg-none
	hidden-xl-up (n/a 3.x) = d-xl-none
Show/hide only for a single breakpoint:
	hidden-xs (only) = d-none d-sm-block (same as hidden-xs-down)
	hidden-sm (only) = d-block d-sm-none d-md-block
	hidden-md (only) = d-block d-md-none d-lg-block
	hidden-lg (only) = d-block d-lg-none d-xl-block
	hidden-xl (n/a 3.x) = d-block d-xl-none
	visible-xs (only) = d-block d-sm-none
	visible-sm (only) = d-none d-sm-block d-md-none
	visible-md (only) = d-none d-md-block d-lg-none
	visible-lg (only) = d-none d-lg-block d-xl-none
	visible-xl (n/a 3.x) = d-none d-xl-block
*/

.ph-how-outer .phho-1 {
    display: block;
    margin-bottom: 0;
    position: absolute;
    /* top: 77px; */
    top: 25px;
}
.ph-how-outer .phho-2 {
    display: block;
    position: absolute;
    right: 0; 
    /* top: -250px; */
    top: -500px;
}
.ph-how-outer .phho-0 {
    width: 100%;
    /* margin-top: -120px; */
    display: block;
    /* position: relative; */
    z-index: 1;
    position:absolute;
    bottom: -350px;
    height:auto;
}
.ph-how {
    padding: 0px 0px 50px;
    position: relative;
}
.row-phhitem {
    margin-top: 60px;
}
.phh-item {
    background: #fff;
    border-radius: 16px;
    padding: 40px 30px 0 30px;
    border: 2px solid #D8E2F3;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.phh-item h3 {
    line-height: 1;
    font-size: 40px;
}
.phh-item p {
    font-size: 15px;
    line-height: 1.5;
    /* min-height: 110px; */
}
.phh-item img {
    width: 100%;
}
.phh-item > div > span {
    color: #fff;
    background: var(--color-pink);
    padding: 10px;
    border-radius:  50px;
    width: 44px;
    height: 44px;
    display: block;
    font-family: 'Apfel Grotezk Fett';
    font-size: 25px;
    line-height: 1;
    text-align: center;
    position: absolute;
    top: -25px;
}
.site-header.invert {
    padding: 20px;
}
.site-header.invert:not(.sticky) .site-header-menu svg path {
    stroke: white;
}
/* .site-header.invert:not(.sticky) a, */
.site-header.invert:not(.sticky) .site-header-menu > ul > li > a, 
.site-header.invert:not(.sticky) .site-header-menu > ul > li > span {
    color: #fff;
}
.site-header.invert:not(.sticky) .site-header-menu > ul > li > a:hover {
    color: var(--color-aqua);
}
.site-header.invert:not(.sticky) .account-login a:first-child {
    background: transparent;
    color: #fff;
    border-color: #fff!important;
}
.site-header.invert:not(.sticky) .sh-st-float {
    color: #fff;
    border: 1px solid #fff!important;
}
.site-header.invert:not(.sticky) .mobile-menu label .burger::before, 
.site-header.invert:not(.sticky) .mobile-menu label .burger .bar, 
.site-header.invert:not(.sticky) label .burger::after {
    background: #fff;
}

@media screen and (max-width:  1399px) {
    .ph-ready-footer .button-wrap .col-lg-6:first-child a {
        margin-left: 0 !important;
    }
}

@media screen and (max-width: 991px) {
    .nav-inner-top #accordion {
        top: 42%;
        position: absolute;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        transform: translateY(-50%);
    }
}

@media(min-width:  1400px){
    .footer-white-left-price-notif{
        margin-left: -140px;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:0) { 

    /* Safari only override */
    ::i-block-chrome,.checklist li:before {
     z-index: 9999;
    }
}