/* Individuell */

#circle1 {
    display: flex;
    margin-top: -15vh;
    margin-left: -10em; 
    position: absolute; 
    width: 17em;
    height: 17em;
    background: rgb(78,2,110);
    background: -moz-linear-gradient(90deg, rgba(78,2,110,1) 0%, rgba(88,2,110,0.8748541652989321) 100%);
    background: -webkit-linear-gradient(90deg, rgba(78,2,110,1) 0%, rgba(88,2,110,0.8748541652989321) 100%);
    background: linear-gradient(90deg, rgba(78,2,110,1) 0%, rgba(88,2,110,0.8748541652989321) 100%);
}

#circle2 {
    width: 60vh;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: -10vh;
    background: #f7c10f;
}



/* Circle floating */

.container {
    width: 70%;
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.circle {

    margin: 5px;
    border-radius: 50%;
    animation: floating 3s ease-in-out infinite;
}

#blue {
    width: 100px;
    height: 100px;
    background: #34a1b4;
}


.bubbles {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    pointer-events: none;
}

.container2 {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content:center;
}


.blue2 {
    width: 7em;
    height: 7em;
    background: linear-gradient(90deg, rgba(204,118,32,0.6647701316854867) 0%, rgba(204,118,32,1) 100%);

}

.purple2 {
    width: 3em;
    height: 3em;
    background: #641bba;
    animation-direction: reverse;

}


@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, -0px); }    
}


/* Circle Pulse */

/*Circle Pulse Animations*/
@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
.circle-container {
    position: relative;
    pointer-events: none;
    border-radius: 50%;
}
.circle-container .circlePulse {
    border-radius: 50%;
    position: absolute;
    /*Sizes*/
    /*Positions*/
}
.circle-container .circlePulse.circle-sm {
    height: 250px;
    width: 250px;
    
}
.circle-container .circlePulse.circle-md {
    height: 150px;
    width: 150px;
}
.circle-container .circlePulse.circle-lg {
    height: 200px;
    width: 200px;
    z-index: -2;
}
.circle-container .circlePulse:nth-child(1) {
    top: 55px;
    left: 66px;
}
.circle-container .circlePulse:nth-child(2) {
    top: 299px;
    left: 50vw;
}
.circle-container .circlePulse:nth-child(3) {
    top: 60vh;
    left: 20vw;
}

.animate1 {
    -webkit-animation: pulse 3s ease-in-out infinite both;
    animation: pulse 3s ease-in-out infinite both;
}
.animate2 {
    -webkit-animation: pulse 1s ease-in-out infinite both;
    animation: pulse 1s ease-in-out infinite both;
}
.animate3 {
    -webkit-animation: pulse 2s ease-in-out infinite both;
    animation: pulse 2s ease-in-out infinite both;
}

/* Different styling when the screen width goes beyond 920px */
@media only screen and (min-width: 920px) {
    #circle1 {

    }
}


/* Circles überschreiben*/

.bubbles {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-left: -3em;
    margin-top: -2em; 
    position: absolute;
    pointer-events: none;
}

.circle-containerNEW {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    pointer-events: none;
    border-radius: 50%;
}

.circle-containerNEW .circlePulse {
    border-radius: 50%;
    margin-left: -12em;

    /*Sizes*/
    /*Positions*/
}
.circle-containerNEW .circlePulse.circle-sm {
    height: 15em;
    width: 15em;

}

/*Bubbles */

.greyish {
    width: 4em;
    height: 4em;
    background: linear-gradient(90deg, rgba(170,202,215,0.84404184036896) 0%, rgba(170,202,215,1) 100%);
    animation-direction: reverse;
}

#slide1bubble {
    display: flex;
    align-items: flex-end;
    color: #f7c10f;
}

#slide2bubbles {
    display: flex;
    align-items: flex-start;
    float:right;
    pointer-events: none;
}

#EndBubbleSection1 {
    display: flex;
    align-items: flex-end;

}


/*Änderungen Frederik */

.circle-rechts{
    position: absolute;
    right:0;
    top:0;
    z-index: -2;
}

.circle-links{
    position: absolute;
    left:0;
    top:0;
    z-index: -2;
}



.circle-links .circlePulse.circle-sm, .circle-rechts .circlePulse.circle-sm {margin:0;} /* CSS-Werte aus der circle.css Datei überschreiben */

#BubbleClaudia{
    margin-top:-10vw;
    margin-left:45vw;
    width: 4em;
    height:4em;
    background: linear-gradient(90deg, rgba(219,143,19,1) 0%, rgba(219,143,19,0.6311566863073355) 100%);
}


#BubbleJon{ 
    margin-right:-30vw;
    
}

#big_circle_jon {
    width: 15em;
    height: 15em;
    background: linear-gradient(90deg, rgba(180,34,174,0.6171510840664391) 0%, rgba(180,34,174,1) 100%);

}
#SmallBubbleJon {
    margin-right: -16em;
    margin-top: 1em; 
}

#small_circle_jon {
    width: 3em;
    height: 3em;
    background: linear-gradient(90deg, rgba(115,27,165,0.6815768543745624) 0%, rgba(115,27,165,1) 100%);
}


#BubbleSvenja{
    margin-left:-30vw;
}

#big_circle_svenja {
    width: 15em;
    height: 15em;
    background: linear-gradient(90deg, rgba(42,102,90,0.7235936610972514) 0%, rgba(42,102,90,1) 100%);
}

#SmallBubbleSvenja {
    margin-left: -16em;
    margin-top: 1em; 
}

#small_circle_svenja {
    width: 3em;
    height: 3em;
    background: linear-gradient(90deg, rgba(42,102,90,0.7235936610972514) 0%, rgba(42,102,90,1) 100%);
}



.container_bouncing {
    display: flex;
    top:0;
    left:0;
    position: absolute;
    pointer-events: none;

}

.bouncing_circle1{
    width: 8em;
    height: 8em;
    border-radius: 50%;
    animation: floating 3s ease-in-out infinite;
}

#SvenjaBouncing1 {
    margin-left: -35em;
    margin-top: 8em; 
}

#SvenjaCircle1{
    width:13em;
    height:13em;
    background: linear-gradient(90deg, rgba(42,102,90,0.7235936610972514) 0%, rgba(42,102,90,1) 100%);
}

#SvenjaBouncing2 {
    margin-left: -23em;
    margin-top: 6em; 
}

#SvenjaCircle2{
    width:3em;
    height:3em;
    animation-direction: reverse;
    background: linear-gradient(90deg, rgba(42,90,102,0.7235936610972514) 0%, rgba(42,85,102,1) 100%);
}


#BubbleKimia{
    margin-right: -20em;
    margin-top: 3em; 
    animation: floating 5s ease-in-out infinite;
}

#big_circle_kimia {
    width: 2em;
    height: 2em;
    background: linear-gradient(90deg, rgba(38,35,114,0.6731734930300245) 0%, rgba(38,35,114,1) 100%);
}

#SmallBubbleKimia {
    margin-right:-30vw;
    margin-top: -5em; 
}

#small_circle_kimia {
    width: 6em;
    height: 6em;
    background: linear-gradient(90deg, rgba(204,118,32,0.6647701316854867) 0%, rgba(204,118,32,1) 100%);
}


#SmallBubbleLuzia {
    margin-left: -33em;
    margin-top: -2em; 
}

#small_circle_luzia {
    width: 5em;
    height: 5em;
    background: linear-gradient(90deg, rgba(183,193,99,1) 0%, rgba(183,193,99,0.7460026246826856) 100%);
}

#MiniBubbleLuzia {
    margin-left: -30em;
    margin-top: 4em; 
}

#mini_circle_luzia {
    width: 1.7em;
    height: 1.7em;
    background: linear-gradient(90deg, rgba(107,0,121,1) 0%, rgba(107,0,121,0.6899802157191002) 100%);
}


#BigBubbleLuzia {
    margin-left: -40em;
    margin-top: 7em; 
}

#big_circle_luzia {
    width: 15em;
    height: 15em;
    background: linear-gradient(90deg, rgba(83,0,136,1) 0%, rgba(83,0,136,0.6563667703409488) 100%);
}

#BubbleSarah{
    margin-right:-20em;;
}

#big_circle_sarah {
    width: 15em;
    height: 15em;
    background: linear-gradient(90deg, rgba(136,0,102,0.667571252133666) 0%, rgba(136,0,102,1) 100%);
}

#BubbleDaniel{
    margin-right: -21em;
    margin-top: 7em; 
    animation: floating 5s ease-in-out infinite;
}

#big_circle_daniel {
    width: 3em;
    height: 3em;
    background: linear-gradient(90deg, rgba(194,150,186,0.6731734930300245) 0%, rgba(194,150,186,1) 100%);
}


#SmallBubbleLydia {
    margin-left: -33em;
    margin-top: 7em; 
}

#small_circle_lydia {
    width: 5em;
    height: 5em;
    background: linear-gradient(90deg, rgba(204,118,32,0.6647701316854867) 0%, rgba(204,118,32,1) 100%);
}


#SmallBubbleSabine {
    margin-left:-25em;
    margin-top: -3em; 
}

#small_circle_sabine {
    width: 4em;
    height: 4em;
    background: linear-gradient(90deg, rgba(82,22,134,0.6451622885482318) 0%, rgba(82,22,134,1) 100%);
}

#MiniBubbleSabine {
    margin-left: -37em;
    margin-top: -3em; 
}

#mini_circle_sabine {
    width: 12em;
    height: 12em;
    animation: floating 5s ease-in-out infinite;
    background: linear-gradient(90deg, rgba(180,34,174,1) 0%, rgba(180,34,174,0.698383577063638) 100%);
}


#BigBubbleSabine {
    margin-left: -33em;
    margin-top: 12em; 
}

#big_circle_sabine {
    width: 2em;
    height: 2em;
    background: linear-gradient(90deg, rgba(10,95,241,1) 0%, rgba(10,95,241,0.7151902997527135) 100%);
}


#BubbleMarilyn{
    margin-right:-10em;
    margin-top: 3em;
}

#big_circle_marilyn {
    width: 20em;
    height: 20em;
    background: linear-gradient(90deg, rgba(88,2,110,0.72919590199361) 0%, rgba(88,2,110,1) 100%);
}

#SmallBubbleMarilyn{
    margin-right: -5em;
    margin-top: 16em; 
    animation: floating 5s ease-in-out infinite;
}

#small_circle_marilyn {
    width: 3em;
    height: 3em;
    background: linear-gradient(90deg, rgba(183,193,99,0.6927813361672794) 0%, rgba(183,193,99,1) 100%);
}

/*Kreise ab Scrolldown Claudia 1*/

#kreis1 { /* orange */
    margin-right: 20em;
    margin-top: 1em; 
    position:absolute;
    width: 4em;
    height: 4em;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(204,118,32,0.6647701316854867) 0%, rgba(204,118,32,1) 100%);
}

#kreis2 { /* pink */
    margin-right: 10em;
    margin-top: 3em; 
    position:absolute;
    animation: floating 5s ease-in-out infinite;
    animation-direction: reverse;
    width: 7em;
    height: 7em;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(218,30,170,0.6255544454109769) 0%, rgba(218,30,170,1) 100%);
    z-index: -5;
}

#kreis3 { /* hellrosa */
    width: 2em;
    height: 2em;
    background: linear-gradient(90deg, rgba(194,150,186,0.6731734930300245) 0%, rgba(194,150,186,1) 100%); 
    position: relative;
    float: right;
    margin-top: 7em;
    margin-right: -7em;
    animation: floating 5s ease-in-out infinite;
}

#kreis4 {
    margin-top: 10vh;
    margin-left: -5em;
    position: absolute;
}

#kreis5 {
    float: right;
    margin-top: -25em;
    margin-left: 30em; 
}

#kreis6 {
    margin-top: 15vh;
    margin-left: 30vw;
    position: absolute;
}





#BubbleCl1 {
    position: relative;
    float: right;
    margin-top: 5em;
    animation: floating 5s ease-in-out infinite;
}
#big_circle_Cl1 {
    width: 2em;
    height: 2em;
    background: linear-gradient(90deg, rgba(194,150,186,0.6731734930300245) 0%, rgba(194,150,186,1) 100%);
}


#Bubble6Cont{
    display: flex; 
    margin-right: 36vw;
    position: absolute;

}

#bubble_6 {
    width: 3em;
    height: 3em;
    background: linear-gradient(90deg, rgba(107,0,121,1) 0%, rgba(107,0,121,0.6899802157191002) 100%);
}

#Bubble8Cont{
    display: flex; 
    margin-left: -10em;
    margin-top:5em;
    position: absolute;
    animation: floating 5s ease-in-out infinite;
}

#bubble_8 {
    width: 7em;
    height: 7em;
    background: linear-gradient(90deg, rgba(42,102,90,0.7235936610972514) 0%, rgba(42,102,90,1) 100%);
}

#bubble_9 {
    width: 12em;
    height: 12em;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(204,118,32,0.6647701316854867) 0%, rgba(204,118,32,1) 100%);
    margin-left: 30em;
    position:absolute;
}

#bubble_10 {
    width: 3em;
    height: 3em;
    border-radius: 50%;
    margin-top: 5em;
    position: absolute;
    background: linear-gradient(90deg, rgba(194,150,186,0.6731734930300245) 0%, rgba(194,150,186,1) 100%);
}