/*
Theme Name: Frost Child
Theme URI: https://frostwp.com/
Template: frost
Author: WP Engine
Author URI: https://wpengine.com/
Description: With its clean, minimal design and powerful feature set, Frost enables agencies to build stylish and sophisticated WordPress websites. Frost is a masterpiece of design and functionality. It features a range of valuable patterns, including hero and portfolio sections, prominent call-to-action buttons, and customer testimonials. Whether you’re building a website for your business, personal brand, or creative project, Frost is perfect for anyone looking to launch quickly and efficiently.
Tags: block-patterns,block-styles,custom-colors,custom-logo,custom-menu,editor-style,full-site-editing,one-column,template-editing,threaded-comments,translation-ready,wide-blocks
Version: 1.0.9.1742827088
Updated: 2025-03-24 14:38:08
*/

/* ------------------------------------------------------------------------------------------- */
/* ----------------------------------- BASIC AND MIXED STYLING ------------------------------- */
/* ------------------------------------------------------------------------------------------- */
a {
    text-decoration: none;
}

/* THIS IS THE ONE!!! */

/* circle photos with color layers behind
--------------------------------*/
.circle-photo {
    position: relative;
    display: inline-block;
  }
  
  .circle-photo::before,
  .circle-photo::after {
    content: '';
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    z-index: 0;
  }
  
  .circle-photo::before {
    background-color: #aecfb7;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% - 10px), calc(-50% - 10px));
  }
  
  .circle-photo::after {
      background-color: #e7bfd0;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% + 10px), calc(-50% + 10px));
  }
  
  .circle-photo img {
    position: relative;
    z-index: 1;
    width: 450px;
    height: 450px;
    border: none;
    border-radius: 50%;
  }
  
  
  /*contact us section 
  -------------------------------*/
  
  .contact-section-with-icons__wrapper, 
  .contact-section-with-icons__wrapper a{
      color: #00976e;
  }
  
  .contact-section-with-icons__wrapper a:hover{
      color: black;
  }
  
  .contact-section-with-icons__wrapper img {
      filter: brightness(0) saturate(100%) invert(35%) sepia(83%) saturate(376%) hue-rotate(119deg) brightness(92%) contrast(95%);
  }
  


/* ------------------------------------------------------------------------------------------- */
/* ------------------------------------- CARUSELS/SLIDESHOWS --------------------------------- */
/* ------------------------------------------------------------------------------------------- */

/* general styling of slideshows
--------------------------------------------------*/
.wp-block-cb-carousel .slick-prev:before {
    color: hsl(0, 0%, 40%, 0.4);
    font-size: 30px;
}
.wp-block-cb-carousel .slick-next:before {
    color: hsl(0, 0%, 40%, 0.4);
    font-size: 30px;
}

/* fixing line up of left arrow */
.wp-block-cb-carousel.alignfull .slick-prev {
    left: 28px;
}
/* ...and also the right arrow */
.wp-block-cb-carousel.alignfull .slick-next {
    right: 38px;
}

/* specific styling for reviews slideshow 
--------------------------------------------------------*/

/* star animation */
@keyframes jumpingStar{
	0% { transform: translateY(0);}
	50% { transform: translateY(-10px);}
	100% { transform: translateY(0);}
}

@keyframes starJumpAndGrow {
  0%    { transform: translateY(0) scale(1); }
  10%   { transform: translateY(-6px) scale(1.1); }   /* Snabbt hopp från start */
  20%   { transform: translateY(-10px) scale(1.2); }  /* Fortsätter snabbt upp */
  30%   { transform: translateY(-12px) scale(1.3); }  /* Närmar sig maxhöjd */
  40%   { transform: translateY(-12px) scale(1.2); }  /* Något minskad för att skapa en puls-effekt */
  50%   { transform: translateY(-12px) scale(1.25); }  /* Maxhöjd och pulserar upp och ner */
  60%   { transform: translateY(-12px) scale(1.3); }  /* Pulserar något mer vid toppen */
  75%   { transform: translateY(-12px) scale(1.25); }  /* Fortfarande kvar vid toppen */
  85%   { transform: translateY(-11px) scale(1.2); }  /* Liten rörelse nedåt, pulserar lite */
  90%   { transform: translateY(-9px) scale(1.1); }   /* Accelererar nedåt */
  100%  { transform: translateY(0) scale(1); }        /* Faller tillbaka till original */
}




.slideshow-reviews__card--wrapper:hover
.slideshow-reviews__card--star-container figure:first-child img{
	animation: jumpingStar 0.5s ease-in-out forwards;
	animation-delay: 0s;
	cursor: pointer;
}
.slideshow-reviews__card--wrapper:hover
.slideshow-reviews__card--star-container figure:nth-child(2) img{
	animation: jumpingStar 0.5s ease-in-out forwards;
	animation-delay: 0.1s;
}
.slideshow-reviews__card--wrapper:hover
.slideshow-reviews__card--star-container figure:nth-child(3) img{
	animation: jumpingStar 0.5s ease-in-out forwards;
	animation-delay: 0.2s;
}
.slideshow-reviews__card--wrapper:hover
.slideshow-reviews__card--star-container figure:nth-child(4) img{
	animation: jumpingStar 0.5s ease-in-out forwards;
	animation-delay: 0.3s;
}
.slideshow-reviews__card--wrapper:hover
.slideshow-reviews__card--star-container figure:nth-child(5) img{
	animation: starJumpAndGrow 1s ease-in-out forwards;
	animation-delay: 0.4s;
}

/* adding extra space between slide items */
.carusel__reviews--wrapper .wp-block-cb-slide{
	margin: 0px 15px;
} 

/* ------------------------------------------------------------------------------------------- */
/* ------------------------------------------ NINJA FORM ------------------------------------- */
/* ------------------------------------------------------------------------------------------- */

/* Hide asterix sumbol for requested fields */
.ninja-forms-req-symbol {
    display: none;
}

/* Text and form - gradient background, white text */
.text-and-form-container {
    background-image: linear-gradient(to right top, #00a1ba, #00BF98, #36C486);
    color: white;
}

/* change asterisk color if background requires it */
.form--colored-bg .ninja-forms-req-symbol {
    color: white;
}

/* remove boring warning text about what an asterisk means */
.nf-form-fields-required {
    display: none;
}

/* change the color of the info icon for help text if background requires it */
.form--colored-bg span.fa.fa-info-circle.nf-help {
    filter: invert(1);
}

/* set custom color for warning messages if background requires it */
.form--colored-bg .nf-after-form-content .nf-error-msg,
.form--colored-bg .nf-error-msg.nf-error-required-error {
    color: white;
}

/* if background requires it, set custom color when a field is focused */
.form--colored-bg input:focus, 
.form--colored-bg textarea:focus {
    border: 5px solid white;
}

/* round corners on input text areas 
-----------------------------------------------*/
input, select, textarea {
    background-color: var(--wp--preset--color--base);
    border: 1px solid white;
    border-radius: 10px;
}

/* border on unfilled fields that are requiered */
.nf-error.listimage-wrap .nf-field-element ul, .nf-error .ninja-forms-field {
    border: 3px solid #e80000;
}


/* styling and hover effect on the submit button in ninja-forms */    
.ninja-forms-field.nf-element[type="submit"] {
    border-radius: 50px;
    background-color: white;
    padding: 10px 40px;
    border: 1px solid white;
}
.ninja-forms-field.nf-element[type="submit"]:hover {
	filter: brightness(0.8);
 	cursor: pointer;
}


/*mixed stylings of ninja form
--------------------------------------------*/

/* padding between fields */
.nf-field-element {
    padding-bottom: 20px;
}

/* styling of area with text about accepting conditions */
.nf-field-element p{
	font-size: 18px;
	margin-top: -18px;
	margin-bottom: -5px;
}

.nf-error-msg.nf-error-required-error{
	display:none;
}

.nf-error-field-errors{
	margin-top: -6px;
	font-size: 18px;
}

.nf-form-content a{
	color: white;
}

.nf-form-content a:hover{
	color: hsl(0, 0%, 90%);
}

.nf-field-container{
	margin-bottom: 0px;
}



/* ------------------------------------------------------------------------------------------- */
/* ------------------------------------- BLOGS ARCHIVES & TAGS ------------------------------- */
/* ------------------------------------------------------------------------------------------- */

/* button link (read more..) to post permalink */
.wp-block-post-excerpt__more-link{
    background-color: var(--wp--preset--color--custom-green);
    border-radius: 50px;
    border: 2px solid var(--wp--preset--color--custom-green);
    padding: 10px 40px;
    color: white;
    font-weight: 400;
}
.wp-block-post-excerpt__more-link:hover{
    background-color: white;
    color: var(--wp--preset--color--custom-green);
}

/* hover effect on postlinks to categories and tags */
.taxonomy-post_tag a:hover,
.taxonomy-category a:hover
{
	opacity: 0.7
}
/* hover effect on post title */
.wp-block-post-title:hover{
	opacity: 0.7;
}




  

/* ------------------------------------------------------------------------------------------- */
/* -------------------------------------- PACKAGES & PRICES ---------------------------------- */
/* ------------------------------------------------------------------------------------------- */

/* Packages - splitting cards on multiple rows on smaller screens
------------------------------------------*/
.wp-block-columns.price-package__cards--container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 1400px) {
    .wp-block-columns.price-package__cards--container {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 1000px) {
    .wp-block-columns.price-package__cards--container {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 800px) {
    .wp-block-columns.price-package__cards--container {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* ------------------------------------------------------------------------------------------- */
/* ------------------------------------------ CUSTOMERS -------------------------------------- */
/* ------------------------------------------------------------------------------------------- */

/* Customers cards - THREE in a row
--------------------------------------------*/
.wp-block-columns.customers__cards--container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.wp-block-columns.customers__cards--container .wp-block-column{
	padding: 20px;
	border-radius: 10px;
}

@media (max-width: 1595px) {
    .wp-block-columns.customers__cards--container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1070px) {
    .wp-block-columns.customers__cards--container {
        grid-template-columns: repeat(1, 1fr);
	}
}

/* Making all the surface around the text clickable link */
 .wp-block-columns.customers__cards--container a{
	display: inline;
	width: 100%:
	height: 100%;
}

.wp-block-columns.customers__cards--container p{
	margin-top: 0;
}

.wp-block-columns.customers__cards--container .wp-block-column:hover{
	cursor: pointer;
	box-shadow: 1px 1px 5px 1px hsl(0, 0%, 85%);
}
/* neutralizing global hover effect on all linked img */
.wp-block-columns.customers__cards--container .wp-block-column a img:hover{
	filter: brightness(1);
}

/* Customers cards - TWO in a row
---------------------------------------------------*/

.wp-block-columns.customers__cards--container-two-in-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

@media (max-width: 1070px) {
    .wp-block-columns.customers__cards--container-two-in-row {
        grid-template-columns: repeat(1, 1fr);
	}
}

.wp-block-columns.customers__cards--container-two-in-row .wp-block-column {
    padding: 20px;
    border-radius: 20px;
}

.wp-block-columns.customers__cards--container-two-in-row a{
	display: inline;
	width: 100%:
	height: 100%;
}
.wp-block-columns.customers__cards--container-two-in-row p{
	margin-top: 0;
}
.wp-block-columns.customers__cards--container-two-in-row .wp-block-column:hover{
	cursor: pointer;
	box-shadow: 1px 1px 5px 1px hsl(0, 0%, 85%);
}
.wp-block-columns.customers__cards--container-two-in-row .wp-block-column a img:hover{
	filter: brightness(1);
}



/* Pricing table
----------------------------------------------------------------------------*/
.wp-block-table td {
    border: 1px solid hsl(0, 0%, 80%)!important;
}

/* remove left border of the table body*/
#e-trade-table td 
{
    border-left: none!important;
}

/* remove right border of the table body*/
#e-trade-table td:last-child
{
    border-right: none!important;
}

#e-trade-table th {
    border-top: 1px solid hsl(0, 0%, 80%);
    border-left:none!important;
    border-right:none!important;
    text-transform: uppercase;
}


#e-trade-table tr:hover{
    background-color: hsl(0, 0%, 98%);
    cursor: pointer;
}

.wp-block-table td img{
	padding-top:10px;
}

/* Pricing cards
-----------------------------------------------------------------------------*/

/* success checkmarks instead of list bullets */
.price-package__cards--container li {
    position: relative;
    padding-left: 36px; 
    list-style: none;
    padding-bottom: 15px;  
}
.price-package__cards--container li:before {
    content: "\f12a";
    font-family: 'dashicons';
    font-size: 22px;
    position: absolute;
    left: 0;
    top: -2.8px;
    color: #00966e; /* Din gröna färg */
}

.price-package__card {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    min-height: 750px;
    border-radius: 5px;
  }
  
.price-package__card--cta-button-container {
    display: flex;
    justify-content: center; 
    align-items: flex-end;   
    height: 100%;
    padding-bottom: 20px;
}

.price-package__card--header-container{
    width: 100%;
    border-bottom: 1px solid hsl(0, 0%, 80%);
    padding-bottom: 30px;
}

/*hover effekt på header text*/
.price-package__card--header-container a:hover{
    opacity: 0.6;
}







/* ------------------------------------------------------------------------------------------- */
/* ------------------------------------ SITE HEADER SECTION ---------------------------------- */
/* ------------------------------------------------------------------------------------------- */

/* cover image big 
---------------------------------------*/

.header__cover--curved-bottom{
    width: 100%;
    height: auto;
    clip-path: ellipse(120% 82% at 50% 0%); 
}

.contatiner__content-over-header-image{
    padding-left: 250px;
    padding-right: 250px;
}


/* WHITE HEADER without image 
---------------------------------------------------------------------------------------*/

.cta-btn-no-image-header.navmenu-button--cta a{
	font-size: 18px;
    	padding: 8px 25px;
    background-color: var(--wp--preset--color--custom-green);
    border-radius: 50px;
    border: 2px solid var(--wp--preset--color--custom-green);
}

.cta-btn-no-image-header.navmenu-button--cta a:hover{
	font-size: 18px;
       	background-color: white;
	color: var(--wp--preset--color--custom-green);
	border: 2px solid var(--wp--preset--color--custom-green);
}

.header-navbar__container.header-navbar__container-white-bg {
    color: rgb(0, 0, 0);
    position: fixed;
    z-index: 10;
    width: 100%;
    background-color: white;
    border-bottom: 1px solid hsl(0, 0%, 80%);
    padding: 0 30px;
}

/*Fade in and out white header (this is just to make the fading animatnion of the other, black nav menu, not show since the both menu has som classes in common)  )*/
@keyframes fadeOutWhiteBackground {c
    100% {background-color: hsla(0, 0%, 100%);}
    0% {background-color: transparent}
}
@keyframes fadeInWhiteBackground {
    0% {background-color: transparent}
    100% {background-color: hsla(0, 0%, 100%);}
}

/* add new css after a certain amount of scrolling*/
.header-navbar__container.header-navbar__container-white-bg.scrolled {
    animation: fadeOutWhiteBackground 0.5s ease-in-out forwards;
}
.header-navbar__container.header-navbar__container-white-bg:not(.scrolled) {
    animation: fadeInWhiteBackground 0.5s ease-in-out forwards;
}


/* HEADER with first TRANSPARENT then WHITE background
-----------------------------------------------------------------------------------------------------*/

.white-header__big-img--container {
    color: white;
    position: fixed;
    z-index: 10;
    width: 100%;
    background-color: transparent;
    padding: 0 30px;
    transition: color 1s ease-in-out forwards;

}

/* style transformations when header transforms from transparant to white after some scrolling */
.white-header__big-img--container.scrolled {
    animation: fadeInWhiteBackground 0.5s ease-in-out forwards;
    color: black;
    border-bottom: 1px solid hsl(0, 0%, 80%);
}
.white-header__big-img--container.scrolled h2.header-navbar__logo--white a{
    color: rgb(0, 0, 0);
}
.white-header__big-img--container.scrolled .navmenu-button--cta a{
    background-color: var(--wp--preset--color--custom-green);
    border-radius: 50px;
    border: 2px solid var(--wp--preset--color--custom-green);
}
.white-header__big-img--container.scrolled .navmenu-button--cta a:hover{
    background-color: white;
    color: var(--wp--preset--color--custom-green);
} 

/* HEADER with first TRANSPARENT then BLACK background
-----------------------------------------------------------------------------------------------------*/

/*heading text on big heading image*/
.fade-in-up h2 {
    font-size: 60px;
}

/*CTA button styling*/
.navmenu-button--cta a{
    background-color: transparent;
    color: white;
    border-radius: 50px;
    border: 2px solid white;
    font-size: 18px;
    padding: 8px 25px;
}
.navmenu-button--cta a:hover{
    background-color: var(--wp--preset--color--custom-green);
    color: white;
    border: 2px solid var(--wp--preset--color--custom-green);
}


@keyframes fadeInBlackBackground {
    0% {background-color: transparent}
    100% {background-color: hsla(0, 0%, 0%, 0.85);}
}

@keyframes fadeOutBlackBackground {
    0%{background-color: rgba(0, 0, 0, 0.85);}
    100%{background-color: transparent;}
}

.big-img-header__container--black {
    color: white;
    position: fixed;
    z-index: 10;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    padding: 0 30px;
}

/* add new css on black header after a certain amount of scrolling*/
.big-img-header__container--black.scrolled {
    animation: fadeInBlackBackground 0.5s ease-in-out forwards;
}
.big-img-header__container--black:not(.scrolled) {
    animation: fadeOutBlackBackground 0.5s ease-in-out forwards;
}



/*hide nav bar after some scrolling (applies on all headers) 
------------------------------------------------------------------------------------------------------*/
.header-navbar__container.hidden {
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.header-navbar__container:not(.hidden) {
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
}


/* --------------------------------------------------------------------------------- */
/* -------------------------------------- NAV MENU --------------------------------- */
/* --------------------------------------------------------------------------------- */
 
/* hamburger menu START
-------------------------------------------------------*/
#modal-1.is-menu-open ul.wp-block-navigation__container li > ul li {
	border: none;
}

ul.wp-block-navigation__container{
	gap: 0; !important;
}

.header-navbar__container #modal-1.is-menu-open{
	height: 100vh;
}


/* hamburger menu END
-------------------------------------------------------*/


/* hover effects on nav links */
a.wp-block-navigation-item__content:hover{
    opacity: 0.6;
}

/* targeting items with sumenus in main menu*/
.wp-block-navigation__container > .wp-block-navigation-item.has-child.open-on-hover-click.wp-block-navigation-submenu > button svg {
  	transform: rotate(0);
    	transition: transform 0.4s ease-in-out;
	margin-left: -25px;
	}

/* rotate arrow in main menu when hovering*/
ul.wp-block-navigation__container 
  > li.wp-block-navigation-item.has-child.open-on-hover-click.wp-block-navigation-submenu:hover 
  > button svg {
	transform: rotate(-180deg);
}

/*rotate back to initial position when not hovering*/
.wp-block-navigation-item.has-child.open-on-hover-click.wp-block-navigation-submenu:not(hover) > button svg{
    transform: rotate(0deg);
}

/*making clickable area bigger för mobile devices*/
.header-navbar__container ul{
    gap: 0px;
}
ul.wp-block-navigation__container > li a{
    display: block;
    padding: 25px 12.5px 25px 12.5px;
    font-weight: 600;
}


ul.wp-block-navigation__container > li a:hover{
    cursor: pointer;
}

ul.wp-block-navigation__container li > ul li{
    border-bottom: 1px solid hsl(0deg, 0%, 90%);
    font-weight: 400;
    font-size: 16px;
}

/* remove padding from submenu container */
ul.wp-block-navigation__submenu-container.has-background.has-base-background-color {
	padding: 0px;
	border: 1px solid hsl(0deg, 0%, 90%)
}

/* set default styling on arrow icon in submenus*/
ul.wp-block-navigation__submenu-container 
  li.wp-block-navigation-item.has-child.wp-block-navigation-submenu 
  > button.wp-block-navigation__submenu-icon.wp-block-navigation-submenu__toggle{
	margin-right: 12.5px;
	transform: rotate(-90deg);
	transition: 0.4s ease-in-out;
}
/* rotate arrow icon when hovering submenu items */
ul.wp-block-navigation__submenu-container 
  li.wp-block-navigation-item.has-child.wp-block-navigation-submenu:hover
  > button.wp-block-navigation__submenu-icon.wp-block-navigation-submenu__toggle{
	transform: rotate(0deg);
}




ul.wp-block-navigation__container li > ul{
    border-radius: 3px;
}




/* --------------------------------------------------------------------------------- */
/* --------------------------------- HEDAER LOGO ----------------------------------- */
/* --------------------------------------------------------------------------------- */

/* Header Logo white & green
 ---------------------------- */

h2.header-navbar__logo a{
	font-size: 36px;
	text-decoration: none;
    display: inline-block;
}
h2.header-navbar__logo a:hover{
	filter: brightness(1.2);
} 

.header-navbar__logo--white a{
    color: white;
}

h2.header-navbar__logo--black a{
    color: rgb(0, 0, 0);
}

/* animation of header logo 
------------------------------*/
.fade-in-text {
    opacity: 1; /* Starta som osynlig */
    transition: color 2s ease; /* Lägger till övergång för färg och opacitet */
}

/* När sidan är laddad, ge fade-effekten (styrs via JS)*/
.fade-in-text.fade-in {
    opacity: 1; /* Gör texten synlig */
    color: rgb(95, 167, 47); /* Färgen som du vill fade till */
}


/* ------------------------------------------------------------------------------------------- */
/* -------------------------------------- BUTTONS SECTION ------------------------------------ */
/* ------------------------------------------------------------------------------------------- */


/* custom-green color button with different hover effects
---------------------------------------------------*/
.button__hover--custom-green a{
    background-color: var(--wp--preset--color--custom-green);
    border-radius: 50px;
}
.button__hover--custom-green:hover{
    filter:brightness( 0.95);
}

.button__hover--custom-green-outline a{
    background-color: var(--wp--preset--color--custom-green);
    border-radius: 50px;
    border: 2px solid var(--wp--preset--color--custom-green)
}
.button__hover--custom-green-outline a:hover{
    background-color: white;
    color: var(--wp--preset--color--custom-green);
}

.button__hover--custom-green-outline-invert a{
    background-color: transparent;
    color: var(--wp--preset--color--custom-green);
    border-radius: 50px;
    border: 2px solid var(--wp--preset--color--custom-green);
}
.button__hover--custom-green-outline-invert a:hover{
    background-color: var(--wp--preset--color--custom-green);
    color: white;
    border: 2px solid var(--wp--preset--color--custom-green);
}



/* primary color button with different hover effects
---------------------------------------------------*/
.button__hover--primary-color a{
    background-color: var(--wp--preset--color--primary);
    border-radius: 50px;
}
.button__hover--primary-color:hover{
    opacity: 0.7;
}

.button__hover--primary-color-outline a{
    background-color: var(--wp--preset--color--primary);
    border-radius: 50px;
    border: 2px solid var(--wp--preset--color--primary)
}
.button__hover--primary-color-outline a:hover{
    background-color: white;
    color: var(--wp--preset--color--primary);
}

.button__hover--primary-color-outline-invert a{
    background-color: white;
    color: var(--wp--preset--color--primary);
    border-radius: 50px;
    border: 2px solid var(--wp--preset--color--primary)
}
.button__hover--primary-color-outline-invert a:hover{
    background-color: var(--wp--preset--color--primary);
    color: white;
}


/* secondary color button with different hover effects
---------------------------------------------------*/
.button__hover--secondary-color a{
    background-color: var(--wp--preset--color--secondary);
    border-radius: 50px;
}
.button__hover--secondary-color:hover{
    opacity: 0.7;
}

.button__hover--secondary-color-outline a{
    background-color: var(--wp--preset--color--secondary);
    border-radius: 50px;
    border: 2px solid var(--wp--preset--color--secondary)
}
.button__hover--secondary-color-outline a:hover{
    background-color: white;
    color: var(--wp--preset--color--secondary);
}

.button__hover--secondary-color-outline-invert a{
    background-color: white;
    color: var(--wp--preset--color--secondary);
    border-radius: 50px;
    border: 2px solid var(--wp--preset--color--secondary)
}
.button__hover--secondary-color-outline-invert a:hover{
    background-color: var(--wp--preset--color--secondary);
    color: white;
}


/* contrast color button with different hover effects
---------------------------------------------------*/
.button__hover--contrast-color a{
    background-color: var(--wp--preset--color--contrast);
    border-radius: 50px;
}
.button__hover--contrast-color:hover{
    opacity: 0.7;
}

.button__hover--contrast-color-outline a{
    background-color: var(--wp--preset--color--contrast);
    border-radius: 50px;
    border: 2px solid var(--wp--preset--color--contrast)
}
.button__hover--contrast-color-outline a:hover{
    background-color: white;
    color: var(--wp--preset--color--contrast);
}

.button__hover--contrast-color-outline-invert a{
    background-color: transparent;
    color: var(--wp--preset--color--contrast);
    border-radius: 50px;
    border: 2px solid var(--wp--preset--color--contrast)
}
.button__hover--contrast-color-outline-invert a:hover{
    background-color: var(--wp--preset--color--contrast);
    color: white;
}



/* --------------------------------------------------------------------------------------------- */
/* ------------------------------------ DROPDOWN MENU FAQ -------------------------------------- */
/* --------------------------------------------------------------------------------------------- */

#faq-container.is-layout-constrained * {
    margin-block-start: 0;
    margin-block-end: 0;
}


.wp-block-details p{
    padding: 0 20px 15px;
    font-size: 16px;
}

.wp-block-details summary{
    position: relative;
    list-style: none;
    padding: 25px 20px 25px;
    font-weight: 500;
    transition: color 0.2s ease-in-out;
}

.wp-block-details summary::after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 10px;
    height: 10px;
    border: solid black;
    border-width: 0 3px 3px 0;
    transform: rotate(-45deg);
    right: 10px;
    top: 38px;
    transition: transform 0.2s ease-in-out;
}
  
.wp-block-details[open] summary::after{
    transform: rotate(45deg);
}

/* drop down animation 
---------------------------*/

.wp-block-details {
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    max-height: 85px; /* height like summary */
    border-bottom: 1px solid hsl(0, 0%, 90%);
    padding-bottom: 25px;
  }
  .wp-block-details[open] {
    max-height: 500px; /* enough space for content */
  }

/* special class for closing animation */
.wp-block-details.closing {
    max-height: 85px;
  }
/* Hover effects */
.wp-block-details summary:hover::after,
.wp-block-details summary:hover
{
    color: var(--wp--preset--color--custom-green);
    cursor: pointer;
}

/* --------------------------------------------------------------------------------------------- */
/* -------------------------------------- PATTERNS SECTION ------------------------------------- */
/* --------------------------------------------------------------------------------------------- */
#pattern--text-with-image h2{
    font-size: 50px;
}

.cards-container--blog-page > *,
.cards-container > *{
    border-radius: 3px;
}


/* ------------------------------------------------------------------------------------------- */
/* -------------------------------------- MIXED HOVER EFFECTS -------------------------------- */
/* ------------------------------------------------------------------------------------------- */

.wp-block-query-pagination a:hover{
    opacity: 0.7;
}

/* hover effect on links in footer */
.footprints-footer a:hover {
    filter: brightness(0.7);
}

/* hover effect on img links */
a img:hover,¨

.hover__brightness--low:hover{
    filter: brightness(0.9);
}


/* --------------------------------------------------------------------------------------------- */
/* ------------------------------------- SICK SACK PATTERNS ------------------------------------ */
/* --------------------------------------------------------------------------------------------- */


/* Tall image */
#tall-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
  }


/* --------------------------------------------------------------------------------------------- */
/* ------------------------------------- ANIMATIONS SECTION ------------------------------------ */
/* --------------------------------------------------------------------------------------------- */

/* heart infinite animation
----------------------------------*/
@keyframes pulseSmallerBigger{
    0%{transform: scale(1)}
    100%{transform: scale(0.9)}
}

.heart-container{
    width:100%;
    display: flex;
    justify-content: center;
}

.heart:not(.animate-in-view.heart) {
    display: inline-block; /* Gör så att elementet är inline men kan ha egen höjd och bredd */
    cursor: pointer; 
    width: 100px; 
    aspect-ratio: 1; /* Gör att bredd och höjd är lika (blir en kvadrat) */
    border-image: radial-gradient(#f00 69%, #0000 70%) 84.5% / 50%; 
    clip-path: polygon(-41% 0, 50% 91%, 141% 0); 
}

a.heart {
    animation: pulseSmallerBigger 1.5s ease-in-out infinite alternate;
    animation-fill-mode: both;
}

/* arrow animation with hover effect
-------------------------------------------------*/
.right-arrow-link--container{
    text-align: center;
}

.right-arrow-link {
	font-weight: 400;
    display: inline-flex;
}

.right-arrow-link a{
    text-decoration: none;
}

.right-arrow-link::after {  
	font-family: 'dashicons';	
	content: "\00A0\f344";
	position: relative;   
    	top: 2px;
    	transition: transform 0.3s ease-in-out;
}

/* todo: ta bort sen
	.right-arrow-link::after {  
	position: relative; 
    top: 2px;
    font-family: 'dashicons';
    content:"\00A0\f344";
    transition: transform 0.3s ease-in-out;
}
*/
 
.right-arrow-link:hover::after,
.right-arrow-link:hover a{
        cursor: pointer;
        opacity: 0.55;
}
.right-arrow-link:hover::after {
    transform: translateX(7px);
}


/* arrow infinite animation
-----------------------------------------*/
@keyframes arrowRightThenBack{
    0% {transform: translateX(0px)}
    50% {transform: translateX(13px)}
    100% {transform: translateX(0px)}
}

.right-arrow-link--infinite-animation{
    display: inline-flex;
    text-decoration: none;
}
.right-arrow-link--infinite-animation::after{
    position: relative; 
    top: 2px;
    font-family: 'dashicons';
    content:"\00A0\f344";
    animation: arrowRightThenBack 3s ease-in-out;
    animation-iteration-count: infinite;
}

/* Zoom-in aniamation*/
@keyframes zoomOut{
    from{
        transform: scale(1.2);
    }
    to{
        transform: scale(1);
    }
}

/* Fade-in animation */
@keyframes fadeIn {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}


/*fade in image
---------------------------------------------*/
.animation__fade-in{
    opacity: 0;
}
.animation__fade-in.in-view{
    display: block;
    animation: fadeIn 0.6s ease-in forwards;
    animation-delay: 0.5s;
}


/*fade and zoom in image
---------------------------------------------*/
.image-container {
    overflow: hidden;
}
.animation__fade-in--zoom-out{
    opacity: 0;
}

.animation__fade-in--zoom-out.in-view{
    animation: fadeIn 3s ease-in-out forwards, zoomOut 3s ease-in-out forwards;
}

/* Fade-in-and-up animation 
-----------------------------------------------------------*/
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px); 
    }
    to {
        opacity: 1;
        transform: translateY(0); 
    }
}

/* Animation applied on site header content (heading, text and cta-button)
----------------------------------------------*/

/* Rubrik */
.fade-in-up h2 {
    opacity: 0;
    animation: fadeInUp 1s ease-out forwards; 
    animation-delay: 0.2s; 
}

/* Brödtext */
.fade-in-up p {
    opacity: 0;
    animation: fadeInUp 1s ease-out forwards; 
    animation-delay: 0.4s; 
}

/* CTA-knapp */
.fade-in-up a {
    opacity: 0;
    animation: fadeInUp 1s ease-out forwards; 
    animation-delay: 0.6s; 
}

/* Animation applied on three cards in a row 
----------------------------------------------*/
.cards-container > *{
    opacity: 0;
}

.cards-container.in-view > :nth-child(1) {
    animation: fadeInUp 0.6s ease-in-out forwards;
    animation-delay: 0.2s;
}

.cards-container.in-view > :nth-child(2) {
    animation: fadeInUp 0.6s ease-in-out forwards;
    animation-delay: 0.4s;
}

.cards-container.in-view > :nth-child(3) {
    animation: fadeInUp 0.6s ease-in-out forwards;
    animation-delay: 0.6s;
}


/* Animation where parts fades an slides in from the sides
--------------------------------------------------------*/

@keyframes slideInLeft {
    from{
        opacity: 0;
        transform: translate(-50px);
    }
    to{
        opacity: 1;
        transform: translate(0px);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px)
    }
    to {
        opacity: 1;
        transform: translateX(0px);
    }
}


.animation__fade-and-slide-in--left,
.animation__fade-and-slide-in--right {
    opacity: 0;
}

.animation__fade-and-slide-in--left.in-view {
    animation: slideInLeft 0.6s ease-out forwards;
    animation-delay: 0.1s;
}

.animation__fade-and-slide-in--right.in-view {
    animation: slideInRight 0.6s ease-out forwards;
    animation-delay: 0.1s;
}







/* --------------------------------------------------------------------------------------------- */
/* ------------------------------------ MEDIA QUERIES SECTION ---------------------------------- */
/* --------------------------------------------------------------------------------------------- */

@media (max-width: 1500px){
    .contatiner__content-over-header-image{
        padding-left: 0px;
        padding-right: 0px;
    }   l
}


@media (max-width: 1150px) {
    
    h2.header-navbar__logo a{
        font-size: 30px;
    }
    /*heading text on big heading image*/
    .fade-in-up h2 {
        font-size: 48px;
    }
 
    .wp-container-core-group-is-layout-1 {
        justify-content: center;
    }
come

    #pattern--text-with-image h2{
        font-size: 30px;
    }

    /* Converting nav bar to hamburger menu 
    -----------------------*/
    .wp-block-navigation__container {
        display: none;
    }
    /* Styling hamburger icon
    ------------------------*/
    nav.wp-block-navigation button.wp-block-navigation__responsive-container-open{
        display: block;
        height: 100%;
        padding: 0;
        margin-top:30px;
        transform: scale(1.5);
    }
    nav.wp-block-navigation button.wp-block-navigation__responsive-container-open:hover{
        color: hsl(0, 0%, 60%);
    }
}

@media (max-width: 1000px) {
	/* Circle photos with colored patterns behind */
	.circle-photo img {
		width: 350px;
		height: 350px;
	}
	.circle-photo::before,
  
	.circle-photo::after {
		content: '';
    		position: absolute;
    		width: 350px;
    		height: 350px;
    		border-radius: 50%;
    		z-index: 0;
  	}
  
  	.circle-photo::before {
		background-color: #aecfb7;
    		top: 50%;
    		left: 50%;
    		transform: translate(calc(-50% - 5px), calc(-50% - 5px));
  	}
  
  	.circle-photo::after {
    		background-color: #e7bfd0;
    		top: 50%;
    		left: 50%;
    		transform: translate(calc(-50% + 5px), calc(-50% + 5px));
	}
	/* Make the bottom curve less steep on the large image header. */
	.header__cover--curved-bottom{
    	    clip-path: ellipse(150% 82% at 50% 0%); 
	}
}

@media (max-width: 960px) {
    .columns-3.wp-block-post-template.is-layout-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (max-width: 860px) {
	/* shrinking text on pricing table */
	figure#e-trade-table table {
	font-size:14px;
	}   

#pattern--text-with-image h2{
        font-size: 24px;
    }
       /*heading text on big heading image*/
       .fade-in-up h2 {
        font-size: 30px;
    }  
	/* heading and subheading size on page "kunder" */
	.customers-subheading{
		font-size: 24px;
	}

	/* Make the bottom curve less steep on the large image header. */
	.header__cover--curved-bottom{
    	    clip-path: ellipse(180% 82% at 50% 0%); 
	}

}

@media (max-width: 600px) {
	/* shrinking text on pricing table */
	figure#e-trade-table table  {
    	font-size: 12px;
    	}
/* Todo come back here */

	.navmenu-button--cta a {
		margin: 6px 0px;
		padding: 5px 20px;
	}
	nav.wp-block-navigation button.wp-block-navigation__responsive-container-open{
                margin-top: 0px;
        }

	/* Make the bottom curve less steep on the large image header. */
	.header__cover--curved-bottom{
    	    clip-path: ellipse(200% 82% at 50% 0%); 
	}
	


}

@media (max-width: 450px) {
    
    h2.header-navbar__logo a{
        font-size: 24px;
        /* text-decoration: none;
        display: inline-block; */
    }

}

@media (max-width: 390px) {
	.header-navbar .is-layout-flex{
		display:flex;
		flex-wrap: nowrap;
		gap: 0;
	}

	nav.wp-block-navigation button.wp-block-navigation__responsive-container-open{
        	transform: scale(1);
    	}

	/* Make the bottom curve less steep on the large image header. */
	.header__cover--curved-bottom{
    	    clip-path: ellipse(250% 82% at 50% 0%); 
	}


}