body {
  //Fallback for when there is no custom background color defined.
  background: $color__background-body; 
  position: relative;
  &.admin-bar { 
    //if else breaks the WordPress inline styles when front end editing
    position: inherit;
  }
}

:root{
  //check colors at sass/abstracts/variables/_colors.scss
  --color-xxp-black: #000000;
  --color-xxp-white: #ffffff;
  --color-xxp-red: #f27173;
  --color-xxp-yellow: #f6cc4c;
  --color-xxp-green: #84c779;
  --color-xxp-cyan: #61cae4;
  --color-xxp-lila: #de7fb4;
  --color-xxp-pink: #f58b77;
  --color-xxp-violet: #5859a7;
  
  //default bubble color definition
  --bubble-color-01: var(--color-xxp-red); 
  --bubble-color-02: var(--color-xxp-yellow);
  --bubble-color-03: var(--color-xxp-cyan);
  --bubble-color-04: var(--color-xxp-green);
}
@media screen {
  .home {
    --bubble-color-01: var(--color-xxp-white); 
    --bubble-color-02: var(--color-xxp-red);
    --bubble-color-03: var(--color-xxp-yellow);
    --bubble-color-04: var(--color-xxp-white);
  }
  .page-id-617 //que es xarxaprod 
  {
    --bubble-color-01: var(--color-xxp-violet); 
    --bubble-color-02: var(--color-xxp-white);
    --bubble-color-03: var(--color-xxp-white);
    --bubble-color-04: var(--color-xxp-yellow);
  }
  .page-id-626, //qui som junta
  .page-id-2936, //comisions
  .page-id-2937 //ofi tecnica
  {
    --bubble-color-01: var(--color-xxp-yellow);
    --bubble-color-02: var(--color-xxp-white);
    --bubble-color-03: var(--color-xxp-yellow);
    --bubble-color-04: var(--color-xxp-lila);
  }
  .page-id-634 //que oferim
  {
    --bubble-color-01: var(--color-xxp-white); 
    --bubble-color-02: var(--color-xxp-yellow);
    --bubble-color-03: var(--color-xxp-violet);
    --bubble-color-04: var(--color-xxp-white);
  }
  .page-id-659 //premsa
  {
    --bubble-color-01: var(--color-xxp-cyan); 
    --bubble-color-02: var(--color-xxp-cyan);
    --bubble-color-03: var(--color-xxp-yellow);
    --bubble-color-04: var(--color-xxp-white); 
  }
  .page-template-associats-search,
  .post-type-archive-xarxaprod-associat
  {
    --bubble-color-01: var(--color-xxp-white);
    --bubble-color-02: var(--color-xxp-green);
    --bubble-color-03: var(--color-xxp-pink);
    --bubble-color-04: var(--color-xxp-pink);
  }
  .single-xarxaprod-associat {
    --bubble-color-01: var(--color-xxp-pink);
    --bubble-color-02: var(--color-xxp-yellow);
    --bubble-color-03: var(--color-xxp-pink); 
    --bubble-color-04: var(--color-xxp-white);
  }
  
  .page-template-arxiu-general,
  .page-id-643 //arxiu-convos vell
  {
    --bubble-color-01: var(--color-xxp-white); 
    --bubble-color-02: var(--color-xxp-red);
    --bubble-color-03: var(--color-xxp-red);
    --bubble-color-04: var(--color-xxp-white);
  }
  .page-template-convos-search,
  .post-type-archive-xarxaprod-convo
  {
    --bubble-color-01: var(--color-xxp-white); 
    --bubble-color-02: var(--color-xxp-pink);
    --bubble-color-03: var(--color-xxp-green);
    --bubble-color-04: var(--color-xxp-white);
  }
  .single-xarxaprod-convo {
    --bubble-color-01: var(--color-xxp-lila);
    --bubble-color-02: var(--color-xxp-white);
    --bubble-color-03: var(--color-xxp-violet);
    --bubble-color-04: var(--color-xxp-lila);
  }
  .page-template-agenda-search {
    --bubble-color-01: var(--color-xxp-lila);
    --bubble-color-02: var(--color-xxp-white);
    --bubble-color-03: var(--color-xxp-white);
    --bubble-color-04: var(--color-xxp-red);
  }
  
  .category-activitats {
    --bubble-color-01: var(--color-xxp-white); 
    --bubble-color-02: var(--color-xxp-green);
    --bubble-color-03: var(--color-xxp-cyan);
    --bubble-color-04: var(--color-xxp-white);
  }
  .page-id-28, //espai assesorament 
  .page-template-faqs-page 
  {
    --bubble-color-01: var(--color-xxp-white); 
    --bubble-color-02: var(--color-xxp-cyan);
    --bubble-color-03: var(--color-xxp-violet);
    --bubble-color-04: var(--color-xxp-white);
  }
  .page-template-ajut-search,
  .post-type-archive-xarxaprod-ajut,
  .single-xarxaprod-ajut
  //.custom-post-type-ajuts
  {
    --bubble-color-01: var(--color-xxp-cyan);
    --bubble-color-02: var(--color-xxp-white); 
    --bubble-color-03: var(--color-xxp-white);
    --bubble-color-04: var(--color-xxp-violet);
  }
  .page-id-1673 //XarxaREC
  {
    --bubble-color-01: var(--color-xxp-yellow); 
    --bubble-color-02: var(--color-xxp-white);
    --bubble-color-03: var(--color-xxp-green);
    --bubble-color-04: var(--color-xxp-yellow);
  }
  .page-id-2366 //Firas i mercats
  {
    --bubble-color-01: var(--color-xxp-white); 
    --bubble-color-02: var(--color-xxp-violet);
    --bubble-color-03: var(--color-xxp-red);
    --bubble-color-04: var(--color-xxp-white);
  }
  .page-id-2364 //Sostenibilitat
  {
    --bubble-color-01: var(--color-xxp-green); 
    --bubble-color-02: var(--color-xxp-white);
    --bubble-color-03: var(--color-xxp-white);
    --bubble-color-04: var(--color-xxp-violet);
  }
  .page-id-2365 //projecte educatiu
  {
    --bubble-color-01: var(--color-xxp-lila); 
    --bubble-color-02: var(--color-xxp-yellow);
    --bubble-color-03: var(--color-xxp-lila);
    --bubble-color-04: var(--color-xxp-yellow);
  }
  .page-id-1760 //Mentoratge
  {
    --bubble-color-01: var(--color-xxp-cyan); 
    --bubble-color-02: var(--color-xxp-white);
    --bubble-color-03: var(--color-xxp-lila);
    --bubble-color-04: var(--color-xxp-cyan);
  }
  .liquid-bubbles {
  	overflow: hidden;
  	float: left;
  	position: fixed;
  	top: 0;
  	left: 0;
  	z-index: -1000;
  	width: 100vw;
  	height: 100vh;
  
  }
  .bubbles {
  	//--size: 40vw;
  	//--position: -5vw;
    //filter: blur(8rem);
  	position:absolute;
  	width: var(--size);
  	height: var(--size);
  	border-radius: 20%;
  	background: linear-gradient(var(--bgangle),var(--bgcolor), transparent);
  	//animation: 4s ease-in-out 4s infinite alternate bubble-move;
  	&.bubble-01{
  	  top: var(--position);
  	  left: var(--position);
  	  --bgcolor: var(--bubble-color-01);
  		//--bgangle: to bottom right;
  		--bgangle: 135deg;
  	  animation: 5s ease-in-out 2s infinite alternate bubble-move;
  	}
  	&.bubble-02{
  	  top: var(--position);
  		right: var(--position);
  	  --bgcolor: var(--bubble-color-02);
  		//--bgangle: to bottom left;
  		--bgangle: 225deg;
  	  animation: 3s ease-in-out 0s infinite alternate bubble-move;
  	}
  	&.bubble-03{
  		bottom: var(--position);
  	  left: var(--position);
  	  --bgcolor: var(--bubble-color-03);
  		//--bgangle: to top right;
  		--bgangle: 45deg;
  	  animation: 2s ease-in-out 3s infinite alternate bubble-move;
  	}
  	&.bubble-04{
  		bottom: var(--position);
  		right: var(--position);
  	  --bgcolor: var(--bubble-color-04);
  		//--bgangle: to top left;
  		--bgangle: 325deg;
  	  animation: 4s ease-in-out 1s infinite alternate bubble-move;
  	}
  }
}

@media screen and (max-width: 48em) {
  @keyframes bubble-move {
  	from {
  		width: 50vw;
      height: 70vh;
  	  filter: blur(3rem);
  	 /* transform: rotate(0);*/
  	}
  	to {
  		width: 100vw;
  		height: 40vh;
  	  filter: blur(8rem);
  	 /* transform: rotate(5deg);*/
  	}
  }
  .bubbles {
  	--size: 50vw;
  	--position: 0vw;
    height: 70vh;
    filter: blur(3rem);
    border-radius: 3%;
  }
}
@media screen and (min-width: 48em) {
  @keyframes bubble-move {
  	from {
  		width: 40vw;
      height: 40vw;
  	  filter: blur(10rem);
  	 /* transform: rotate(0);*/
  	}
  	to {
  		width: 90vw;
  		height: 20vw;
  	  filter: blur(20rem);
  	 /* transform: rotate(5deg);*/
  	}
  }
  .bubbles {
  	--size: 40vw;
  	--position: -5vw;
    filter: blur(20rem);
  }
}
@media screen and (min-width: 80em) {
}