/* BACKGROUND STYLES */
:root {
    --style-color-default: #edfcfe;
    --style-color-dark: #d5f9fe;
}

#jca-background{
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
  overflow: hidden;
}

/* STYL 1 */
.style-1:before{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 36vw;
  height: 80vh;
  background-color: var(--style-color-default);
  content: '';
  border-radius: 0 0 20vw 0;
  z-index: 0;
  pointer-events: none;
}

/* STYL 2 */
.style-2:before{
  position: absolute;
  top: 20vh;
  right: 0px;
  width: 72vw;
  height: 128vh;
  background-color: var(--style-color-default);
  content: '';
  border-radius: 20vw 0 0 20vw;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* STYL 3 */
.style-3:before{
  position: absolute;
  top: 0px;
  right: 0px;
  width: 68vw;
  height: 32vh;
  /*background-image: url(img/bg1.svg) ;
  background-size: 240px; */
  background: var(--style-color-default);
  content: '';
  border-radius: 0 0 0 20vw;
  z-index: 0;
  pointer-events: none;
}


/* STYL 4 */
.style-4:before{
  position: absolute;
  top: 150px;
  right: 0px;
  width: 60vw;
  height: 50vh;
  background-color: var(--style-color-default);
  content: '';
  border-radius: 20vw 0 0 20vw;
  z-index: 0;
  pointer-events: none;
}

/* STYL 5 */
.style-5 #jca-background:before{
  position: absolute;
  top: 0px;
  right: 0px;
  width: 80vw;
  height: 80vh;
  background-color: var(--style-color-default);
  content: '';
  border-radius: 0 0 0 20vw;
}

/* STYL 6 */

.style-6 #jca-background:before{
  position: absolute;
  top: 0px;
  right: 0px;
  width: 30vw;
  height: 60vh;
  background-color: var(--style-color-default);
  content: '';
  border-radius: 0 0 0 20vw;
  z-index: 0;
  pointer-events: none;
}


@media only screen and (max-width: 768px) {

  .style-1:before{
    position: absolute;
    width: 80vw;
    height: 80vh;
  }

}